javascript - 从点击开始，数值一次只显示一个，这是为什么呢？

Question

我假设它是防止选择多个数字的 forEach 方法。但不确定还可以使用什么来显示它们。

<div class="container">
<div id="calculator" class="calc">
<input type="field" id="userinput" placeholder="0">

    <button  value= 7 class="numbers" id= "seven" >7</button>
    <button value =8 class="numbers" id= "eight">8</button>
    <button value =9 class="numbers"id= "nine">9</button>
    <button value =* class="operator"id= "multiply">*</button>
    <button value =4 class="numbers" id= "four">4</button>
    <button value =5 class="numbers" id=  "five">5</button>
    <button value =6 class="numbers" id= "six">6</button>
    <button value =- class="operator" id= "subtract">-</button>
    <button value =1 class="numbers" id= "one">1</button>
    <button value =2 class="numbers" id= "two">2</button>
    <button value =3 class="numbers" id=  "three">3</button> 
    <button value =+ class ="operator" id= "add">+</button>   
    <button value =/ class ="operator" id= "divide">/</button>
    
    <button class="clear" value ="" id= "clr">C</button>
    <button value = "" class="delete" id ="del">DEL</button>
    <button value ="=" class = "equals" id= "equal">=</button>
</div>
</div>

javascript

let display = document.getElementById("userinput");
const numberButtons = document.querySelectorAll('.calc > .numbers');


numberButtons.forEach(btn => {
    btn.onclick = function (btn) {
      
        display.placeholder = btn.target.value;
    }
  })

标签： javascripthtmlcss

Answer 1

每次单击按钮时，您都会覆盖占位符。如果要显示多个，则应改为附加：

let display = document.getElementById("userinput");
const numberButtons = document.querySelectorAll('.calc > .numbers');


numberButtons.forEach(btn => {
  btn.onclick = function(btn) {

    display.placeholder += btn.target.value;
  }
})

<div class="container">
  <div id="calculator" class="calc">
    <input type="field" id="userinput" placeholder="0">

    <button value=7 class="numbers" id="seven">7</button>
    <button value=8 class="numbers" id="eight">8</button>
    <button value=9 class="numbers" id="nine">9</button>
    <button value=* class="operator" id="multiply">*</button>
    <button value=4 class="numbers" id="four">4</button>
    <button value=5 class="numbers" id="five">5</button>
    <button value=6 class="numbers" id="six">6</button>
    <button value=- class="operator" id="subtract">-</button>
    <button value=1 class="numbers" id="one">1</button>
    <button value=2 class="numbers" id="two">2</button>
    <button value=3 class="numbers" id="three">3</button>
    <button value=+ class="operator" id="add">+</button>
    <button value=/ class="operator" id="divide">/</button>

    <button class="clear" value="" id="clr">C</button>
    <button value="" class="delete" id="del">DEL</button>
    <button value="=" class="equals" id="equal">=</button>
  </div>
</div>