如何通过单击将按钮中的值添加到文本框中？答案

【问题标题】：How can I add the value from button to the text box by click?如何通过单击将按钮中的值添加到文本框中？
【发布时间】：2021-07-07 21:13:57
【问题描述】：

const button = document.getElementById('#1');
button.addEventListener('click', e=>{
e.preventDefault()
document.getElementByName('field).innerText = 1;
})

 <div class="header">
            <input type="text" name="field" id="field">
        </div>
      




<div class="btn"><input type="button" id="1" class="button" value="1"></div>
            <div class="btn"><input type="button" id="2" class="button" value="2"></div>
            <div class="btn"><input type="button" id="3" class="button" value="3"></div>

当我单击按钮时，什么都不会发生，我该如何管理。

【问题讨论】：

标签： javascript button input event-listener

【解决方案1】：

这里有几件事要学习。 getElementById 将没有 # 的字符串作为参数。您的getElementByName('field) 中也有错字（缺少单引号）。此外，没有getElementByName - 它将是getElementsByName（复数）。最后，您希望将相同的侦听器应用于某个类的所有按钮，以便将它们收集起来（我使用了document.querySelectorAll('.button')，但getElementsByName("button") 也可以）。获得该集合后，遍历它以设置事件侦听器。

最后，当您想更改输入标签中的文本时，您可以通过value 来完成，而不是innterText。 innerText 用于非表单 HTML 元素

const buttons = document.querySelectorAll('.button');
const field = document.querySelector('[name=field]');
buttons.forEach(button => button.addEventListener('click', e => {
  e.preventDefault()
  let f = field.value.trim()? field.value.trim().split(",") : [];
  f.push(e.target.value);
  field.value = f.join(",")
}))

<div class="header">
  <input type="text" name="field" id="field">
</div>
<div class="btn"><input type="button" id="1" class="button" value="1"></div>
<div class="btn"><input type="button" id="2" class="button" value="2"></div>
<div class="btn"><input type="button" id="3" class="button" value="3"></div>

【讨论】：

tnx 兄弟，但它不起作用，文本框中没有任何变化。
它在上面的 sn-p 中工作对吗？它对我有用
我遇到了另一个问题，当我点击两次时，这意味着一次又一次地点击另一个按钮，文本框清除先前的文本我可以毫无困难地加入它们。谢谢
好的，我更新了答案，让您可以继续添加输入 - 您是这个意思吗？

【解决方案2】：

当您尝试获取 DOM 元素的值时，您需要获取元素引用，然后使用 value 属性。例如：

const buttonValue = document.getElementById('submit').value;

使用getElementById 时，您不需要使用#1，只需1 就足够了。此外，getElementByName 似乎不是一个正确的 DOM 操作函数，替代方法是 getElementsByName（获取具有指定名称的所有元素的列表）。

记住这一点，请参阅下面的代码：

const button = document.getElementById('1');

button.addEventListener('click', e=>{
  e.preventDefault();
  document.getElementById('field').value = e.target.value;
});

  <div class="header">
     <input type="text" name="field" id="field">
 </div>
      
 <div class="btn">
     <input type="button" id="1" class="button" value="1"> 
 </div>
            <div class="btn"><input type="button" id="2" class="button" value="2"></div>
            <div class="btn"><input type="button" id="3" class="button" value="3"></div>

【讨论】：