Несколько кнопок, которые изменят одно текстовое поле на значение этой кнопки, используя одну функцию в JavaScript

Question

хорошо, так что у меня есть 10 кнопок, которые отображаются от 0 до 9. Ниже есть текстовое поле, которое будет отображать «кнопка 3 нажата» или «кнопка 0 нажата» в зависимости от того, какая кнопка была нажата и так далее. Однако я должен достичь этого с помощью одной функции, поэтому мой код выглядит примерно так.

    <button onClick="changeNumber()">0</button>
    <button onClick="changeNumber()">1</button>
    <button onClick="changeNumber()">2</button>
    <button onClick="changeNumber()">3</button>
    <button onClick="changeNumber()">4</button>
    <button onClick="changeNumber()">5</button>
    <button onClick="changeNumber()">6</button>
    <button onClick="changeNumber()">7</button>
    <button onClick="changeNumber()">8</button>
    <button onClick="changeNumber()">9</button>
        <br/>
        <br/>
    <input type="text" id="garlicBread1" size="50%"> 

Я не уверен, как сделать функцию changeNumber ()

Answer 1

Вы можете использовать querySelectorAll и присоединить прослушиватель событий к кнопке вместо добавления onclick к каждой и каждой кнопке. Затем используйте шаблонный литерал для создания строки и присоедините ее к значению ввода

let getButtons = document.querySelectorAll('button').forEach((item) => {
  item.addEventListener('click', function(e) {
    let txt = e.target.textContent
    document.getElementById('garlicBread1').value = `button ${txt} is clicked`
  })
})

<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<br/>
<br/>
<input type="text" id="garlicBread1" size="50%">

Answer 2

согласен с ДК, просто используйте его вот так

 <button onClick="changeNumber()">0</button>
    <button onClick="changeNumber(1)">1</button>
    <button onClick="changeNumber(2)">2</button>
    <button onClick="changeNumber(3)">3</button>
    <button onClick="changeNumber(4)">4</button>
    <button onClick="changeNumber(5)">5</button>
    <button onClick="changeNumber(6)">6</button>
    <button onClick="changeNumber(7)">7</button>
    <button onClick="changeNumber(8)">8</button>
    <button onClick="changeNumber(9)">9</button>
        <br/>
        <br/>
    <input type="text" id="garlicBread1" size="50%"> 

и в твоей функции

function changeNumber(number){
console.log(number);
}

Answer 3

Ну, вы можете сделать что-то вроде этого:

 <button onClick="changeNumber(0)">0</button>
        <button onClick="changeNumber(1)">1</button>
        <button onClick="changeNumber(2)">2</button>
        <button onClick="changeNumber(3)">3</button>
        <button onClick="changeNumber(4)">4</button>
        <button onClick="changeNumber(5)">5</button>
        <button onClick="changeNumber(6)">6</button>
        <button onClick="changeNumber(7)">7</button>
        <button onClick="changeNumber(8)">8</button>
        <button onClick="changeNumber(9)">9</button>
            <br/>
            <br/>
        <input type="text" id="garlicBread1" size="50%"> 

    <script>
    function changeNumber(val){
     document.getElementById("garlicBread1").value =
        val + "clicked";
    }
    </script>

Answer 4

Вы можете использовать что-то вроде этого. Вы можете передать ссылку на элемент в обработчик события, а затем использовать его для получения innerHTML

function changeNumber(elm) {
  document.getElementById('garlicBread1').value = 'button ' + elm.innerHTML + ' is clicked';
}

<button onClick="changeNumber(this)">0</button>
<button onClick="changeNumber(this)">1</button>
<button onClick="changeNumber(this)">2</button>
<button onClick="changeNumber(this)">3</button>
<button onClick="changeNumber(this)">4</button>
<button onClick="changeNumber(this)">5</button>
<button onClick="changeNumber(this)">6</button>
<button onClick="changeNumber(this)">7</button>
<button onClick="changeNumber(this)">8</button>
<button onClick="changeNumber(this)">9</button>
<br/>
<br/>
<input type="text" id="garlicBread1" size="50%">