javascript - 将文本从具有相同 id 的 div 复制到输入 onclick

Question

所以今天我决定学习 javascript 并尝试一些看似简单的东西。 。但我陷入困境，无法弄清楚为什么这不起作用。

我试图将文本从具有相同 id onclick 的 div 复制到输入，但它总是将第一个 div 文本复制到输入中，而不是我单击的 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">