如何從<Input>通過使用 getElementbyTagName？

Question

我正在嘗試創建一個不使用 ID 從輸入文本字段復制文本的按鈕。

我認為最好的方法是使用事件偵聽器，然后單擊激活從輸入值復制文本的功能。

HTML：

<div>
 <input type="text" value="copy this" readonly>
 <button type=button id='btn'>Copy URL</button>
</div>

JS：

  <script> 
  document.querySelect('#btn').addEventListener('click', function() {
   jimsFunction();
});
  
  function jimsFunction() {
  var copyText = document.getElementByTagName('input').value;
  copyText.select();
  copyText.setSelectionRange(0, 99999); 
  navigator.clipboard.writeText(copyText.value);
  alert("Copied: " + copyText.value);
  }    

</script>

有人可以指出我在這里做錯了什么嗎？

謝謝

Answer 1

1. 首先通過tag獲取元素。 你s錯過了

document.getElementByTagName ->document.getElemenstByTagName

2. 循環元素並添加事件

試試看 ：

 document.getElementById('btn').addEventListener('click', function() { jimsFunction(this) }); let btns = document.getElementsByClassName('btn') Array.from(btns).forEach(ele => { ele.addEventListener('click', function() { jimsFunction(this) }); }) function jimsFunction(input) { let ele = input.previousElementSibling ele.select() ele.setSelectionRange(0, 99999) navigator.clipboard.writeText(ele.value) alert("Copied: " + ele.value) }

 <div> <input type="text" value="copy this" readonly> <button type=button id='btn'>Copy URL</button> </div> <div> <input type="text" value="text 1" readonly> <button type=button class='btn'>Copy URL</button> </div> <div> <input type="text" value="text 2 (different)" readonly> <button type=button class='btn'>Copy URL</button> </div>

你是重復的id ，你應該改成class