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

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>

when I click on the button nothing be occur and how can I manage that.

Answer 1

A few things to learn here. getElementById takes a string with no # as an argument. You also had a typo in your getElementByName('field) (missing single quote). Additionally, there isn't a getElementByName - it would be getElementsByName (plural). Finally, you want to apply the same listener to all buttons of a certain class, so you can gather them up (I used document.querySelectorAll('.button') but getElementsByName("button") would work as well). Once you have that collection, iterate through it to set the event listener.

Lastly when you want to change the text in an input tag, you do it through the value , not the innterText . innerText is used for non-form HTML elements

 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

When you are trying to get the value of a DOM element, you need to get the element reference and then use the value property. For example:

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

When using getElementById you don't need to use #1 , just 1 would be enough. Also, getElementByName doesn't seem to be a proper DOM manipulation function, the alternative is getElementsByName (gets list of all elements with specified name).

Keeping this in mind, see code below:

 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>