I assume its the forEach method preventing multiple numbers to be selected. But not sure what else to use so that they all display.
<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;
}
})
You are overwriting the placeholder every time a button is clicked. If you want to display multiple, you should be appending instead:
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>