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

Question

 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>

当我点击按钮时什么也没有发生，我该如何管理。

Answer 1

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

最后，当您想更改 input 标签中的文本时，您可以通过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>

Answer 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>