Supongo que es el método forEach que evita que se seleccionen varios números. Pero no estoy seguro de qué más usar para que se muestren todos.

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