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

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 >

<div >
<div  onclick="myFunction(event)">
<div ><span >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 >

<div >
<div  onclick="myFunction(event)">
<div ><span >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 >

<div >
 <div  onclick="myFunction(event)">
  <div ><span >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>

```

CodePudding user response：

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 >

    <div >
      <div >
        <div ><span >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 >

    <div >
      <div >
        <div ><span >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 >

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

</body>

</html>

```

CodePudding user response：

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 >

<div >
  <div  onclick="myFunction(event)">
   <span >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 >

<div >
  <div  onclick="myFunction(event)">
   <span >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 >

<div >
  <div  onclick="myFunction(event)">
   <span >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>

```

CodePudding user response：

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 >

<div >
<div >
<div  onclick="myFunction(event)"><span >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 >

<div >
<div >
<div  onclick="myFunction(event)"><span >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 >

<div >
 <div >
  <div  onclick="myFunction(event)"><span >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.