多个按钮，将使用 javascript 中的一个函数将一个文本字段更改为该按钮的值答案

【问题标题】：Multiple buttons that will change the one text field to the value of that button using the one function in javascript多个按钮，将使用 javascript 中的一个函数将一个文本字段更改为该按钮的值
【发布时间】：2018-09-03 11:17:18
【问题描述】：

好的，所以我有 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()

【问题讨论】：

标签： javascript function button onclick textfield

【解决方案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%">

【讨论】：

【解决方案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%">

【讨论】：

这是正确的做法，即尽可能多地消除重复。

【解决方案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>

【讨论】：

【解决方案4】：

同意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);
}

【讨论】：