javascript - 多个按钮，使用 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%">