Question

所以今天我决定学习javascript并尝试一些看似简单的事情。。但是我被困住了，无法弄清楚为什么这不起作用。

我正在尝试将onclick具有相同id的div中的文本复制到输入中，但是它总是将第一个divs文本复制到输入中，而不是我单击的div中。

有什么想法我可以解决这个问题吗？

function copyToInput(elementId) {
  var getText = document.getElementById(elementId).innerText;
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = getText;
}

<div class="hud-chat-message" id="message" onclick="copyToInput('message');"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message" onclick="copyToInput('message');"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message" onclick="copyToInput('message');"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Answer 1

请勿对元素使用相同的ID ，而应使用相同的类。您可以在onclick函数中传递整个元素，并在函数中获取其文本

function copyToInput(elementId) {
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = elementId.innerText;
}

<div class="hud-chat-message message"  onclick="copyToInput(this);"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message message" onclick="copyToInput(this);"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message message"  onclick="copyToInput(this);"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Answer 2

两个div不能共享ID。您可以共享类，但是ID是唯一的标识符。

https://www.w3schools.com/tags/att_id.asp

id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。

Answer 3

Try This:



    function copyToInput(elementId) {
  var getText = document.getElementById(elementId).innerText;
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = getText;
}
    <div class="hud-chat-message" id="message" onclick="copyToInput('message');"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message2" onclick="copyToInput('message2');"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message1" onclick="copyToInput('message1');"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

Answer 4

ID必须为unique，在您情况下id不是唯一的，因此当document.getElementById(elementId)看到与id匹配的第一个message时，它，并且不会继续搜索（因此始终获取第一格）。

您的代码不需要使用ID的{{1}}。 this是指点击this的人。

div

function copyToInput(elementId) {
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = elementId.innerText ;
}

Answer 5

使用以下代码。您所有的元素都必须具有唯一的ID。在您的代码中，它使用第一个ID的唯一原因是因为第一个它将使用的ID（因为您只能有1个ID，并且代码假定您只有1个ID）。只需给3个元素提供不同的ID。

function copyToInput(elementId) {
  var getText = document.getElementById(elementId).innerText;
  var chatHudInput = document.getElementsByClassName('hud-chat-input')[0];
  chatHudInput.value = getText;
}

<div class="hud-chat-message" id="message1" onclick="copyToInput('message1');"> SOME TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message2" onclick="copyToInput('message2');"> SOME MORE TEXT HERE </div>
<hr>
<div class="hud-chat-message" id="message3" onclick="copyToInput('message3');"> EVEN MORE TEXT HERE </div>
<hr>
<input type="text" name="message" class="hud-chat-input" placeholder="Enter your chat message..." maxlength="140">

从具有相同ID的div复制文本以输入onclick

5 个答案: