简单的HTML / JavaScript计算器不起作用？
[英]Simple HTML/JavaScript calculator not working?
问题描述
HTML Code (Calculator.html): 
HTML代码（Calculator.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="answer"></span></p>
<script src="Calculator_JS.js>"></script>
</body>
</html>
Here is the JavaScript code(Calculator_JS.js): 这是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;
}
}
For some reason when I click the calculate button it doesn't do anything. 由于某些原因，当我单击“计算”按钮时，它什么也没做。 Any help will be awesome! 任何帮助都会很棒！ Thanks! 谢谢！
4 个解决方案
解决方案1
1 2015-05-08 16:52:55
Try This Code 试试这个代码
<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>
(Type 2 Numbers and it's will Type the Answer (x + y)) The Problem is It's Typing it As a String: in The First Textbox the Number is 5 and in the second it's 5 too then when the Calculate Button is Pressed, it's will show （键入2个数字，它将键入答案（x + y））问题是将其键入为字符串：在第一个文本框中，数字是5，在第二个文本框中，数字也是5，然后按“计算”按钮时，它是将会呈现
The Answer is: 55 and not 10... 答案是： 55，而不是10 ...
So what you need to do is this: 因此，您需要做的是：
ParseInt(document.getElementById("num1").value);
ParseInt(document.getElementById("num2").value);
and not 并不是
document.getElementById("num1");
document.getElementById("num2");
in the var num1a and num2a. 在var num1a和num2a中。 That's will Fix the Problem :) 那将解决问题:)
解决方案2
0 已采纳 2013-09-20 02:18:17
see this fiddle for your answer. 看到这个小提琴为您的答案。
- Your answer span was incorrectly named 'answer' and not 'Answer' 您的答案范围被错误地命名为“答案”，而不是“答案”
- Your Drop Down did not have values assigned to the options. 您的下拉菜单没有为选项分配值。
- You needed to Parse the Integer Values before assigning the span text. 您需要在分配跨度文本之前解析整数值。
- Instead of using
document.getElementById('Answer').value = answer;而不是使用document.getElementById('Answer').value = answer;you should usedocument.getElementById('Answer').innerHTML = answer;您应该使用document.getElementById('Answer').innerHTML = answer;
解决方案3
0 2013-09-20 02:25:11
i found two errors. 我发现了两个错误。
- Capital A in
document.getElementById('Answer').document.getElementById('Answer')大写字母A。 When it should bedocument.getElementById('answer').何时应为document.getElementById('answer')。 As the name of the id is in also small a.由于id的名称也很小。 - instead of
.value = answerit should be.textContent = answeror innerText/innerHtml.而不是.value = answer它应该是.textContent = answer或innerText / innerHtml。
Demo: http://jsfiddle.net/techsin/uVpxr/ 演示： http ： //jsfiddle.net/techsin/uVpxr/
解决方案4
0 2013-10-31 13:59:42
Very Simple Calculator (html5 css3 js) 非常简单的计算器（html5 css3 js）
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 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;
}
example 例
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.