Question

我在JS中使用非常简单的计算器时遇到了问题。我希望它能在一个方框中显示结果，但我不知道我做错了什么。我的代码中可能还有一些可能不正确的东西...... 请帮帮我！

使用Javascript：

＆＃13;

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');
};

＆＃13;

<!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>

＆＃13;

：）

Answer 1

首先，您没有提交ID的元素。
您尝试在元素存在之前添加onclick处理程序。
您正在选择具有ID的其他元素，但它们只有一个名称。
您正在向表单添加单击事件，不确定在没有方法输出时您希望执行的操作。

Answer 2

您选择的是id，但值arithmeticOperator是您选择框的name。

试试这个： <select name="arithmeticOperator" id="arithmeticOperator">

Answer 3

document.getElementById通过id获取元素。您有多种情况需要查找具有其名称或类型的元素。那不行。

document.getElementById('calcForm').onclick=output;
这会尝试将名为output的函数绑定到名为calcForm的元素的click事件。我不知道你在这里想做什么。

要在输入或输出中显示结果，您只需执行 document.getElementById("idOfTheElement").value = result;

Answer 4

当您似乎渴望了解解决方案时 - 我已经为您创建了this fiddle。

请仔细检查并查看我在您的代码中完成的修改。

许多错误，错别字改变（如其他人所述）包括：

您的代码中name=可以换出每个id=个实例。在javascript中了解差异至关重要。
您没有在开始时声明任何变量。任何javascript变量都以var开头（包括数组，对象，甚至通常是函数）
代码发出POST错误。您必须处理表单的提交事件（因为HTML自动发送它） - 请参阅函数event.preventDefault()中的第一行

重新编写了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;
};

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>

JavaScript，计算器输出

4 个答案: