JavaScript copy the text inside the button when press-CodePudding

can someone help me on how to copy the text inside the button when that button was pressed? so basically, it's a password generator, there's a button to generate a password and a 2 extra buttons with no text in it, the password generated will be paste in that 2 empty button, and what i want to happen is when i press that button the text inside that button will be copied, how can i do that? (also i'm knew to JavaScript).

function copy() {
  // Get the text field
  var copyText1 = document.getElementById("randomOne").innerText;
  var copyText2 = document.getElementById("randomTwo").innerText;

  // Select the text field
  copyText1.select();
  copyText2.select();

  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText1);
  navigator.clipboard.writeText(copyText2);

}

<div >
  <h1>Generate a <br> <span>random password</span></h1>
  <p>Never use an insecure password again.</p>

  <button  onclick="Generate()">Generate passwords</button>
  <label> Enter Password Length </label>
  <input type="number" min="1" max="100" value="length" id="passwordLength">
  <hr>
  <button id="randomOne" onclick="copy()"></button>
  <button id="randomTwo" onclick="copy()"></button>
  <p id="sms">(click/tap the passward you want to copy on your clip board.)</p>
</div>

CodePudding user response：

Pass the clicked button as an argument to copy() by using this. Then it can get the corresponding text.

function copy(el) {
  // Get the text field
  var copyText1 = el.innerText;
  // Copy the text inside the text field
  console.log(`Chosen password is ${copyText1}`);
}

<div >
  <button id="randomOne" onclick="copy(this)">Password 1</button>
  <button id="randomTwo" onclick="copy(this)">Password 2</button>
  <p id="sms">(click/tap the passward you want to copy on your clip board.)</p>
</div>

CodePudding user response：

In your code, you were using 'onclick' to execute the functions, which in plain JavaScript or TypeScript, doesn't work very consistently.

onClick is most common in frameworks or libraries like React.js, Vue.js or Alpine.js. So for now, stick with eventListeners, see:

//In plain Js, we select the element & use 'addEventListener':
var generateBtn = document.querySelector('.generateBtn');
//addEventListener to on click, execute the function:
generateBtn.addEventListener('click', makePassword);

function makePassword() {
  //Generate the password:
  var password = 'secret123';
  var passwordTwo = '123secret';
  //Add the password to the btns:
  copyBtn1.textContent = password;
  copyBtn2.textContent = passwordTwo;
}

//Now to copy the passwords to the clipboard:
var copyBtn1 = document.getElementById('randomOne');
var copyBtn2 = document.getElementById('randomTwo');

copyBtn1.addEventListener('click', function () {
  var text = copyBtn1.textContent;
  // Copy the text inside the text field:
  navigator.clipboard.writeText(text);
  // Alert the copied text:
  alert('Copied the text: '   text);
});

copyBtn2.addEventListener('click', function () {
  var text = copyBtn2.textContent;
  navigator.clipboard.writeText(text);
  alert('Copied the text: '   text);
});

If you implement this answer on your code, remember to delete all the "onclick" from you HTML.