How to include an entire css icon to be part of the onclick process?

user_19320668 0
Viewed 85

So my problem may sound banal but it is quite annoying. When I click on the css icons in the css accordion, I have to click on the letters URL so that a link is copied into the clipboard. So far the code works fine.

But I want the whole thing to work also when I click on the white border of the css icon (so above and below the URL letters).

What would I need to change to include the entire css icon to be part of the JS onclick process?

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
input {
  display: none;
}
label {
  display: block;    
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
label:hover {
  background: white;
  border: 1px solid white;
  color:black;
}
label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}
input:checked + label::after {
  content: '-';
  right: 14px;
  top: 3px;
}
.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}
input + label + .content {
  display: none;
}
input:checked + label + .content {
  display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip">
 <div class="whitepaper" onclick="myFunction(event)">
  <div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
 </div>
 <input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>

</div>

<script>
function myFunction(event) {
  /* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Copied: " + copyText);
} 
</script>

</body>
</html>

```

onclick url css html javascript
3 Answers

I have now solved the problem. Someone here on Stackoverflow helped me to combine the two DIV elements into one by using a linear gradient. Now the code works perfectly on both fields because it is now a single div. So in a nutshell, I had to improve the CSS code a bit and the problem was solved. Nevertheless, thanks to all who took the time to help me, but the solution came this time nevertheless differently than expected at first.

Here is the finished example of how it works:

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;    
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: linear-gradient(to top, black 12px, white 12px, white 28px, black 28px);
border: 2px solid white;
border-radius: 3px;
color: black;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

  /* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;

  /* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip">
  <div class="whitepaper" onclick="myFunction(event)">
   <span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
  </div>
 <input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip">
  <div class="whitepaper" onclick="myFunction(event)">
   <span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
  </div>
 <input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip">
  <div class="whitepaper" onclick="myFunction(event)">
   <span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
  </div>
 <input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>

</div>

<script>
function myFunction(event) {
  /* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Kopiert: " + copyText);
}
</script>

</body>
</html>

```

user_193206680

Ditch the onclick, declare your tooltip with your whitepaper class(s), then use a function with a click eventlistener

let tooltip = document.querySelectorAll(".whitepaper");

for (let i = 0; i < tooltip.length; i++) {
  tooltip[i].addEventListener("click", function() {
    var copyText = event.target.nextSibling.nextSibling.value
    navigator.clipboard.writeText(copyText);
    alert("Copied: " + copyText);
  });
}
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}

input {
  display: none;
}

label {
  display: block;
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}

label:hover {
  background: white;
  border: 1px solid white;
  color: black;
}

label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}

input:checked+label::after {
  content: '-';
  right: 14px;
  top: 3px;
}

.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}

input+label+.content {
  display: none;
}

input:checked+label+.content {
  display: block;
}

.whitepaper {
  cursor: pointer;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}

.blackframe {
  text-align: center;
  background-color: black;
  cursor: pointer;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 12px 0 12px 0;
  color: white;
  width: 30px;
  pointer-events: none;
}

.whitepaper:hover {
  cursor: pointer;
  text-align: center;
  background-color: black;
  border: 2px solid white;
  border-radius: 3px;
  float: left;
  margin: 5px 5px 5px 0;
  height: 40px;
  width: 30px;
}


/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}


/* Tooltip arrow */

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<!DOCTYPE html>
<html>

<head>
  <title>My example Website</title>
</head>

<body>

  <input type="checkbox" id="title1" name="contentbox" />
  <label for="title1">Content 1</label>

  <div class="content">

    <div class="tooltip">
      <div class="whitepaper">
        <div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
      </div>
      <input type="text" value="https://mywebsite.com/#title1" id="myInput">
    </div>

  </div>

  <input type="checkbox" id="title2" name="contentbox" />
  <label for="title2">Content 2</label>

  <div class="content">

    <div class="tooltip">
      <div class="whitepaper">
        <div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
      </div>
      <input type="text" value="https://mywebsite.com/#title2" id="myInput">
    </div>

  </div>

  <input type="checkbox" id="title3" name="contentbox" />
  <label for="title3">Content 3</label>

  <div class="content">

    <div class="tooltip">
      <div class="whitepaper">
        <div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
      </div>
      <input type="text" value="https://mywebsite.com/#title3" id="myInput">
    </div>
  </div>

</body>

</html>

```

user_85650100

This will not open you alert when clicking below or above, but it won't show an error as well.

Just put onClick event inside "blackFrame" div.

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
input {
  display: none;
}
label {
  display: block;    
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
label:hover {
  background: white;
  border: 1px solid white;
  color:black;
}
label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}
input:checked + label::after {
  content: '-';
  right: 14px;
  top: 3px;
}
.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}
input + label + .content {
  display: none;
}
input:checked + label + .content {
  display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title1" id="myInput">
</div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip">
<div class="whitepaper">
<div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div>
</div>
<input type="text" value="https://mywebsite.com/#title2" id="myInput">
</div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip">
 <div class="whitepaper">
  <div class="blackframe" onclick="myFunction(event)"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
 </div>
 <input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>

</div>

<script>
function myFunction(event) {
  /* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Copied: " + copyText);
} 
</script>

</body>
</html>

```

As far as I know, and based on this documentation https://www.w3schools.com/tags/tag_span.asp, I think that you can't do what you wish using Span tag.

user_180990760
Related