如何在 Javascript 中的按钮单击上添加数字？答案

【问题标题】：How to add number on button click in Javascript?如何在 Javascript 中的按钮单击上添加数字？
【发布时间】：2021-09-07 01:54:46
【问题描述】：

我正在制作这个计算器，我想在点击时添加数字。我应该添加一个事件侦听器还是有更简单的方法？我希望号码转到“当前”班级。

<div class="calc-grid">
    <div class="output">
        <div class="prev">123</div>
        <div class="current">456</div>
    </div>
    <button class='span'>AC</button>
    <button>DEL</button>
    <button>÷</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>*</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>+</button>
    <button>8</button>
    <button>8</button>
    <button>9</button>
    <button>-</button>
    <button>.</button>
    <button>0</button>
    <button class='span'>=</button>
</div>

【问题讨论】：

标签： javascript html button calculator

【解决方案1】：

使用 onClick 事件触发一些 JS 代码：

<button onClick="calculate(this)">1</button>

同时为要修改的 div 分配一个 id 以便于查找：

<div class="current" id="current">456</div>

这里是an example that adds the number that you click on。

【讨论】：

【解决方案2】：

尝试考虑这个：

可能会对您有所帮助。

<!DOCTYPE html>  
<html lang = "en">  
<head>  
<title> JavaScript Calculator </title>  
  
<style>   
#clear{  
width: 270px;  
border: 3px solid gray;  
    border-radius: 3px;  
    padding: 20px;  
    background-color: blue;  
}  
  
.formstyle  
{  
width: 300px;  
height: 530px;  
margin: auto;  
border: 3px solid skyblue;  
border-radius: 5px;  
padding: 20px;  
}   
input  
{  
width: 20px;  
background-color: white;  
color: black;  
border: 3px solid gray;  
    border-radius: 5px;  
    padding: 26px;  
    margin: 5px;  
    font-size: 15px;  
}  
#calc{  
width: 250px;  
border: 5px solid black;  
    border-radius: 3px;  
    padding: 20px;  
    margin: auto;  
}  
  
</style>  
  
</head>  
<body>  
<div class= "formstyle">  
<form name = "form1">  
       
  <input id = "calc" type ="text" name = "answer"> <br> <br>  
  <input type = "button" value = "1" onclick = "form1.answer.value += '1' ">  
  <input type = "button" value = "2" onclick = "form1.answer.value += '2' ">  
  <input type = "button" value = "3" onclick = "form1.answer.value += '3' ">  
   <input type = "button" value = "+" onclick = "form1.answer.value += '+' ">  
  <br> <br>  
    
  <input type = "button" value = "4" onclick = "form1.answer.value += '4' ">  
  <input type = "button" value = "5" onclick = "form1.answer.value += '5' ">  
  <input type = "button" value = "6" onclick = "form1.answer.value += '6' ">  
  <input type = "button" value = "-" onclick = "form1.answer.value += '-' ">  
  <br> <br>  
    
  <input type = "button" value = "7" onclick = "form1.answer.value += '7' ">  
  <input type = "button" value = "8" onclick = "form1.answer.value += '8' ">  
  <input type = "button" value = "9" onclick = "form1.answer.value += '9' ">  
  <input type = "button" value = "*" onclick = "form1.answer.value += '*' ">  
  <br> <br>  
    
    
  <input type = "button" value = "/" onclick = "form1.answer.value += '/' ">  
  <input type = "button" value = "0" onclick = "form1.answer.value += '0' ">  
    <input type = "button" value = "." onclick = "form1.answer.value += '.' ">  
  <input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.answer.value) ">  
  <br>    
  <input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= "clear" >  
  <br>   
    
</form>  
</div>  
</body>  
</html>

【讨论】：

onclick = "form1.answer.value += '1' " ...... 由 javascript 组成
@Kiro 我的解决方案对您有帮助吗？？
好的，谢谢！