简单的 HTML/JavaScript 计算器不起作用

Simple HTML/JavaScript calculator not working?

本文关键字：计算器 不起作用 JavaScript HTML 简单      更新时间：2023-09-26

HTML 代码 （计算器.html）：

    <!DOCTYPE html>
<html>
    <head
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Calculator</title>
         <link type="text/css" rel="stylesheet" href="Calculator_CSS.css">
    </head>
    <body>

    <input type ="text" name="number1" style="width:50px;" id="Number1">
    <select id="DropdownMenu1">
  <option>+</option>
  <option>-</option>
  <option>×</option>
  <option>÷</option> 
    </select>
    <input type ="text" name="number2" style="width:50px;" id="Number2">
    <input type="button" value="Calculate" id="submitButton" />
    <p>The answer is: <span id="answerswer"></span></p>
    <script src="Calculator_JS.js>"></script>
    </body>
</html>

以下是 JavaScript 代码（Calculator_JS.js）：

var button = document.getElementById("submitButton");
button.onclick = function(){
if  (document.getElementById("DropdownMenu1").value == "+"){
    var num1 = document.getElementById('Number1').value;
    var num2 = document.getElementById('Number2').value;
    var answer = num1 + num2;
    document.getElementById('Answer').value = answer;
    }
}

出于某种原因，当我单击计算按钮时，它不执行任何操作。任何帮助都会很棒！谢谢！

试试这段代码

<html>
    <body>
        <script type="text/javascript">
            function Calc(){
                var num1a = document.getElementById("num1");
                var num2a = document.getElementById("num2");
                var ans = (num1a + num2a)
                document.write("<b>The Answer Is:</b>" + ans)
            }
        </script>

        <input type ="text" id="num1" style="width:50px;" id="Number1">
        <input type ="text" id="num2" style="width:50px;" id="Number2">
        <input type="button" value="Calculate" id="submitButton"         
onClick="Calc()">
    </body>
</html>
（键入

2 个数字，它将键入答案 （x + y）） 问题是它将其键入为字符串：在第一个文本框中，数字是 5，在第二个文本框中也是 5，然后当按下计算按钮时，它将显示

答案是：55而不是10...

所以你需要做的是这样的： 

ParseInt(document.getElementById("num1").value);
ParseInt(document.getElementById("num2").value);

而不是

document.getElementById("num1");
document.getElementById("num2");

在 VaR NUM 1A 和 NUM2A 中。这将解决问题:)

看看这个小提琴的答案。

  1. 您的答案范围被错误地命名为"答案"而不是"答案"
  2. 您的下拉列表未为选项分配值。
  3. 您需要在分配范围文本之前解析整数值。
  4. 与其使用document.getElementById('Answer').value = answer;不如使用document.getElementById('Answer').innerHTML = answer;

我发现了两个错误。

  1. document.getElementById('Answer')资本A。什么时候应该document.getElementById('answer').由于 id 的名称也在小 a 中。
  2. 而不是.value = answer它应该是.textContent = answer或innerText/innerHtml。

演示：http://jsfiddle.net/techsin/uVpxr/

非常简单的计算器 （html5 css3 js）

.js

function calc(e){
 var a=e.target.innerText,b=this.firstChild;
 b.value=a=='='?eval(b.value):a=='C'?'':b.value+a;
}
var gui=document.createElement('div');
gui.className='clc';
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>';
gui.addEventListener('click',calc,false);
window.onload=function(){
 document.body.appendChild(gui);
}

CSS3

body,html{
 height:100%;
 margin:0;
 padding:0;
 background-color:#666;
}
*{
 box-sizing:border-box;
}
.clc{
 width:256px;
 height:320px;
 clear:both;
}
.clc>*{
 border:4px solid #666;
 border-radius:4px;
 font:normal normal bold 20px/56px Arial,Helvetica,sans-serif;
 border-radius:10px;
}
.clc>input{
 width:100%;
 height:20%;
 text-align:right;
 padding:0 20px;
}
.clc>div{
 width:25%;
 height:20%;
 background-color:#5a5a5a;
 color:#fff;
 text-align:center;
 float:left;
}
.clc>div:nth-child(4n+1){
 background-color:#f36573;
}
.clc>div:nth-last-child(1){
 width:100%;
 background-color:#ffb343;
}

例

http://jsfiddle.net/trjsJ/

相关文章：