多个按钮将使用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

您可以使用类似这样的东西。 您可以将元素的引用传递给事件处理程序，然后使用它来获取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%"> 

Answer 2

您可能想使用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 3

同意dk，就这样使用它

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

好吧，您可以执行以下操作：

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