Question

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    var result = document.getElementById('answer').value;
    if (document.getElementById('add')) {
        function myFunction() {
            add1 = document.getElementById('num1').value;
            add2 = document.getElementById('num2').value;
            ans = (parseInt(add1)+parseInt(add2));
            result.innerHTML = ans;
        }
    }
</script>
</head>
<body>
<input type="text" id="num1" />
    <select id="problem">
        <option id="add">+</option>
        <option id="sub">-</option>
        <option id="mul">x</option>
        <option id="div">÷</option>
    </select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />
</body>
</html>

我正在尝试通过从两个文本框中取值来制作求和求解器，然后在单击按钮后，它应将结果发布在下面的文本框中。然而，它并没有这样做。

我还希望程序使用带有数学符号的下拉菜单来更改问题的解决方法。

感谢。

Answer 1

我认为你是在追求这样的事情

function myFunction() {
    var result = document.getElementById('answer'),
        operator = document.getElementById('problem').value,
        add1 = document.getElementById('num1').value,
        add2 = document.getElementById('num2').value,
        ans = 0;

    switch (operator) {
        case '+':
            ans = (parseInt(add1) + parseInt(add2));
            break;
        case '-':
            ans = (parseInt(add1) - parseInt(add2));
            break;
        case 'x':
            ans = (parseInt(add1) * parseInt(add2));
            break;
        case '÷':
            ans = (parseInt(add1) / parseInt(add2));
            break;
    }

    result.value = ans;
}

而不是使用if语句，并创建不同的函数，只需要一个函数并确定操作数。

编辑另外，请注意您的变量声明。 'ans'，'add1'和'add2'未被声明，导致创建全局变量

Answer 2

问题应该在线

var result = document.getElementById('answer').value;

尝试以下代码段

var result=document.getElementById('answer');
ans = (parseInt(add1)+parseInt(add2));
result.value=ans;

http://jsfiddle.net/2W5za/1/

Answer 3

你有一些问题。不确定if的用途，但将其删除。另外，设置文本框的值value而不是innerHTML。

function myFunction() {
    var result = document.getElementById('answer');
    add1 = document.getElementById('num1').value;
    add2 = document.getElementById('num2').value;
    ans = (parseInt(add1)+parseInt(add2));
    result.value = ans;
}

http://jsfiddle.net/LjqMJ/

Answer 4

关于问题的第一部分（以及这个问题的标题），我看到的一个问题是这行代码就在这里：

var result = document.getElementById('answer').value;

result的类型是什么？稍后，假设它具有属性DOMElement，则将其视为具有result.innerHTML = ans;的{{1}}。但是，因为您使用的是innerHTML，所以实际上.value不会string。

关于第二部分，您可以通过查看innerHTML来确定在<select>中选择了哪个功能。 .value标记将始终存在，无论它们是否被选中。

更广泛地说，我强烈建议您使用chrome或firefox中的调试器进行检查。这将允许您在代码中删除断点，并确定是否正确计算了值，并以交互方式查看它正在尝试写入的内容。

铬： https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

火狐： https://developer.mozilla.org/en-US/docs/Tools/Debugger

Answer 5

您的代码有很多问题。但是，要解决您的问题，请将= ans更改为= ans.toString();

你看，在 javascript 整数和字符串无法转换为彼此的价值而没有转换（有点像兄弟姐妹拒绝要分享），因此toString()用于转换为String。

要更改的另一件事是innerHTML到value，因为您正在处理文本框。

Answer 6

<!DOCTYPE html>
<html>
<head></head>
<body>
 <input type="text" id="num1" />
    <select id="problem">
        <option value="add">+</option>
        <option value="sub">-</option>
        <option value="mul">x</option>
        <option value="div">%</option>
    </select>
 <input type="text" id="num2" />
 <br />
 <input type="submit" onclick="myFunction();" />
 <br />
 <input type="text" id="answer" readonly />


 <script type="text/javascript">
     function myFunction() 
     {
         var e = document.getElementById("problem");
         var sOperation = e.options[e.selectedIndex].value;
         add1 = document.getElementById('num1').value;
         add2 = document.getElementById('num2').value;
         var ans;
         if (!isNaN(add1) && !isNaN(add2)){
        if(sOperation=='add'){
            //Add
            ans = parseInt(add1)+parseInt(add2);
        } else if (sOperation=='sub') {
            //Subtract
            ans = parseInt(add1)-parseInt(add2);
        } else if (sOperation=='mul') {
            //Multiple
            ans = parseInt(add1) * parseInt(add2);
        } else if (sOperation=='div') {
            //Divide
            ans = parseInt(add1) / parseInt(add2);
        }
        document.getElementById("answer").value = ans;      
    } else {
        alert("Please enter numeric values only");
        return false;
    }
}

Answer 7

<强> HTML

<input type="text" id="num1" />
<select id="problem">
    <option id="add">+</option>
    <option id="sub">-</option>
    <option id="mul">x</option>
    <option id="div">÷</option>
</select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />

<强>的JavaScript

function myFunction() {
    var result = document.getElementById('answer');
    var operator = document.getElementById('problem').value;
    var add1 = document.getElementById('num1').value;
    var add2 = document.getElementById('num2').value;
    var ans;
    if (!isNaN(add1) && !isNaN(add2)) {
        //Addition
        if (operator == '+')

        {

            ans = (parseInt(add1) + parseInt(add2));
        }
        //Subtraction
        else if (operator == '-') {

            ans = (parseInt(add1) - parseInt(add2));

        }
        //Multiplication
        else if (operator == 'x') {

            ans = (parseInt(add1) * parseInt(add2));

        }
        //Division
        else if (operator == '÷') {

            ans = (parseInt(add1) / parseInt(add2));
        }
        //Result
        result.value = ans;
    } else {
        alert("Please enter numeric values only");
        return false;
    }
}

<强> Fiddle Demo

结果未显示

7 个答案: