JavaScript，在计算器中输出
[英]JavaScript, output in calculator
问题描述
I have a problem with my very simple calculator in JS. 
我在JS中使用非常简单的计算器时遇到问题。 I want it to show the result in a box but I don't know what it is that I'm doing wrong. 我希望它在框中显示结果，但是我不知道我做错了什么。 There is probably some more things in my code that might not be right... Please help me! 我的代码中可能还有其他不正确的地方，请帮助我！
Javascript: Javascript：
document.getElementById('submit').onclick=function() { num1 = parseFloat(document.getElementById('valueA').value); num2 = parseFloat(document.getElementById('valueB').value); arithmeticOperator = document.getElementById('arithmeticOperator').value; switch(arithmeticOperator) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': if(num2 != 0) { result = num1 / num2; }else { result = 'Dela inte med 0!'; } break; default: result = 'Error'; } document.getElementById('calcForm').onclick=output; window.alert('result'); };
<!DOCTYPE html> <html> <head> <title>blabla</title> <meta charset="utf-8"/> <script src="js.js" defer></script> </head> <body> <form name="calcForm" id="calcForm"> <p><input type="number" name="valueA" placeholder="Värde A" /></p> <p><input type="number" name="valueB" placeholder="Värde B" /></p> <select name="arithmeticOperator"> <option value="+">Addition</option> <option value="-">Subtraktion</option> <option value="/">Division</option> <option value="*">Multiplication</option> </select> <button type="submit">Räkna ut</button> <p><output name="result" form="calcForm"></output></p> </form> </body> </html>
:) :)
4 个解决方案
解决方案1
2 2015-04-13 12:41:30
- First you have no element with the id of submit. 首先，您没有ID为Submit的元素。
- You are trying to add onclick handler to the element before it exists. 您试图将onclick处理程序添加到该元素之前。
- You are selecting other elements with id, but they only have a name. 您正在选择具有ID的其他元素，但它们只有一个名称。
- You are adding a click event to a form, not sure what you expect that to do when there is no method output. 您正在将click事件添加到窗体，不确定在没有方法输出时您希望做什么。
解决方案2
0 2015-04-13 12:40:14
You are selecting by id , but the value arithmeticOperator is the name of your select box. 您正在按id进行选择，但值arithmeticOperator是选择框的name 。
Try this: <select name="arithmeticOperator" id="arithmeticOperator"> 尝试以下操作： <select name="arithmeticOperator" id="arithmeticOperator">
解决方案3
0 2015-04-13 12:47:35
document.getElementById gets elements by their id . document.getElementById通过其id获取元素。 You have multiple cases where you're trying to find elements with their name or type. 在多种情况下，您尝试查找具有其名称或类型的元素。 That won't work. 那行不通。
document.getElementById('calcForm').onclick=output;
This tries to bind a function called output to the click event of an element called calcForm. 这试图将称为输出的函数绑定到名为calcForm的元素的click事件。 I have no idea what you're trying to do here. 我不知道你要在这里做什么。
To show the result in an input or output, you can just do 要在输入或输出中显示结果，您可以
document.getElementById("idOfTheElement").value = result;
解决方案4
0 2015-04-13 12:58:12
As you seem eager to just know the solution - I've created this fiddle for you. 您似乎很想知道解决方案-我为您创建了这个小提琴 。
Please go over it carefully and check the edits I've done in your code. 请仔细检查并检查我在您的代码中所做的修改。
Numerous errors, typos changed (as mentioned by others) include: 许多错误，错别字已更改（如其他人所述）包括：
- Every
name=instance can be swapped out byid=in your code.. It's crucial in javascript to understand the difference.每个name=实例都可以通过代码中的id=换出。.了解这些区别在javascript中至关重要。 - You didn't declare any of the variables at the start. 您一开始没有声明任何变量。 Any javascript variable starts with
var(including arrays, objects and often even functions)任何javascript变量都以var开头（包括数组，对象甚至是函数） - The code was giving a POST error. 代码给出了POST错误。 You have to handle the submit event of a form (because HTML automatically wants to send it) - see the first line in the function
event.preventDefault()您必须处理表单的Submit事件（因为HTML会自动发送它）-请参阅函数event.preventDefault()的第一行。
The javascript code reworked: javascript代码重做：
document.getElementById('submitButton').onclick = function(event) {
event.preventDefault();
var num1 = parseFloat(document.getElementById('valueA').value),
num2 = parseFloat(document.getElementById('valueB').value),
arithmeticOperator = document.getElementById('arithmeticOperator').value,
output = document.getElementById('result');
switch(arithmeticOperator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if(num2 != 0)
{
result = num1 / num2;
}else {
result = 'Dela inte med 0!';
}
break;
default:
result = 'Error';
}
output.innerHTML = result;
window.alert(result);
return false;
};
And the HTML with some modifications: 以及带有一些修改的HTML：
<form name="calcForm" id="calcForm">
<p><input type="number" id="valueA" placeholder="Värde A" /></p>
<p><input type="number" id="valueB" placeholder="Värde B" /></p>
<select name="arithmeticOperator" id="arithmeticOperator">
<option value="+">Addition</option>
<option value="-">Subtraktion</option>
<option value="/">Division</option>
<option value="*">Multiplication</option>
</select>
<button type="submit" id="submitButton">Räkna ut</button>
<p>Result: <output id="result" form="calcForm"></output></p>
</form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.