javascript 计算器无法正常工作
[英]javascript calculator not working properly
问题描述
hi so i am new to javascript and i am trying to make a simple calculator using HTML and js.
嗨，我是 javascript 新手，我正在尝试使用 HTML 和 js 制作一个简单的计算器。 However i have run into a problem where i press the button to calculate the answer and it wont do anything.但是我遇到了一个问题，我按下按钮来计算答案，但它不会做任何事情。 I tried it in an online ide and it just gave me the wrong answer.我在一个在线 ide 中尝试过，它只是给了我错误的答案。 here is the code can anyone help.这是任何人都可以提供帮助的代码。 thanks--谢谢 -
<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
<script type="text/javascript">
document.getElementById("equals").onclick = function() {
var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_1').value);
document.getElementById('answer').innerHTML = answer;
};
</script>
</head>
<body>
<input type="text" name="number_1" id = "number_1">
<p>+</p>
<input type="text" name="number_2" id = "number_2">
<input type="submit" name="equals" id = "equals" value="=">
<p id = "answer"></p>
</body>
</html>
4 个解决方案
解决方案1
0 2016-09-24 12:30:33
You're adding the value from the same input twice and you have to set the event handler after the button is created, .您要两次添加来自同一输入的值，并且必须在创建按钮后设置事件处理程序，。
<body>
<input type="text" name="number_1" id = "number_1">
<p>+</p>
<input type="text" name="number_2" id = "number_2">
<input type="submit" name="equals" id = "equals" value="=">
<p id = "answer"></p>
<script type="text/javascript">
document.getElementById("equals").onclick = function() {
var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_1').value);
document.getElementById('answer').innerHTML = answer;
};
</script>
</body>
解决方案2
0 2016-09-24 12:34:34
forms including onClick conditions without GET/POST methods , generally use button .包含 onClick 条件的表单没有GET/POST方法，一般使用button 。
<input type="button" name="equals" id="equals" value="=">
I guess you are adding same variables twice ?我猜你两次添加相同的变量？
var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_2').value);
解决方案3
0 2016-09-24 12:38:30
The main problem is you are adding the event click to element equals, but in these moment, element equals doesn't exists.主要问题是您将事件单击添加到元素等于，但此时，元素等于不存在。
wrap your document.getElementById into window.onload function to say javascript: "when all the document finish to load, add the event click to element equals"将您的 document.getElementById 包装到 window.onload 函数中以说 javascript：“当所有文档完成加载时，将事件单击添加到元素等于”
try this:尝试这个：
window.onload = function () {
document.getElementById("equals").onclick = function() {
var answer = parseInt(document.getElementById('number_1').value, 10)+ parseInt(document.getElementById('number_2').value, 10);
document.getElementById('answer').innerHTML = answer;
};
}
Another important thing I have added ,10 to your parseint, this is to make sure that the conversion is to a number into decimal mode我在 parseint 中添加了 ,10 的另一件重要事情，这是为了确保将数字转换为十进制模式
"The parseInt() function parses a string and returns an integer. “ parseInt() 函数解析一个字符串并返回一个整数。
The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number. radix 参数用于指定使用哪种数字系统，例如基数为 16（十六进制）表示字符串中的数字应从十六进制数解析为十进制数。
If the radix parameter is omitted, JavaScript assumes the following:如果 radix 参数被省略，JavaScript 假定如下：
If the string begins with "0x", the radix is 16 (hexadecimal) If the string begins with "0", the radix is 8 (octal).如果字符串以“0x”开头，则基数为 16（十六进制） 如果字符串以“0”开头，则基数为 8（八进制）。 This feature is deprecated If the string begins with any other value, the radix is 10 (decimal)"此功能已弃用如果字符串以任何其他值开头，则基数为 10（十进制）"
Source: parseInt use来源： parseInt 使用
解决方案4
0 2016-09-24 12:38:57
i fixed it now i had to wrap my code in a window.onload我现在修复了它我不得不将我的代码包装在 window.onload 中
<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("equals").onclick = function() {
var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_2').value);
document.getElementById('answer').innerHTML = answer;
};
};
</script>
</head>
<body>
<input type="text" name="number_1" id = "number_1">
<p>+</p>
<input type="text" name="number_2" id = "number_2">
<button id = "equals">=</button>
<p id = "answer"></p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.