CODEWITHSUNDEEP
javascript
Fred
Fred

Reputation: 159

How to put url into variable when button clicked

I've tried several things for days... so i whittled this down to save time... I want to click the CopyQQ button, and have the url... ex https://www.TestURL.com/pt/595564 copied into a var. see code below...
I realize that I need to somehow use the e.target, but beyond that, (as a newby to js), I'm just now quite sure how to grab the url field that i need...

<!doctype html>
<head>
  This is head<br>
</head>
<body>
  This is body<br>

<form>

<div class=thelist>

<ul>

<l>  
<br>
  <div class="fj43">
    <button class="fjCopyTxtButton" onclick="copyURL()">
    CopyQQ
    </button>
    https://www.TestURL.com/pt/595564
  </div>
<br>
</l>

<l>
<br>
  <div class="fj43">
    <button class="fjCopyTxtButton" onclick="copyURL()">
    CopyQQ
    </button>
    https://www.TestURL.com/pt/222222
  </div>
<br>
</l>

<l>
<br>
  <div class="fj43">
    <button class="fjCopyTxtButton" onclick="copyURL()">
    CopyQQ
    </button>
    https://www.TestURL.com/pt/333333
  </div>
<br>
</l>

</ul>

</div>

</form>

  <script type="text/javascript">
    function copyURL(e) {
      event.preventDefault();
      var aa = event.target.innerText
      console.log(aa)
    }
  </script>

</body>

</html>

Upvotes: 1

Views: 510

Answers (1)

jonatjano
jonatjano

Reputation: 3728

to get the URL, you need to read the content of the parent of event.target, this is done with parentElement, then remove the text of the button from it, using string.substring

function copyURL(e) {
  event.preventDefault();
  // get ALL the parent text, even button content
  const parentText = event.target.parentElement.innerText
  const buttonText = event.target.innerText
  // remove the text of the button from the parent text
  const url = parentText.substring(buttonText.length + 1)
  console.log(url)
}
<div class="fj43">
  <button class="fjCopyTxtButton" onclick="copyURL()">
  CopyQQ
  </button>
  https://www.TestURL.com/pt/595564
</div>
<div class="fj43">
  <button class="fjCopyTxtButton" onclick="copyURL()">
  CopyQQ
  </button>
  https://www.TestURL.com/pt/222222
</div>
<div class="fj43">
  <button class="fjCopyTxtButton" onclick="copyURL()">
  CopyQQ
  </button>
  https://www.TestURL.com/pt/333333
</div>

Upvotes: 2

Related Questions