如果/其他条件正在查杀我的功能

Question

我是JavaScript新手，我试图为输入字段中的2个值加上一个简单的计算器，再加上一个选择下拉菜单中的运算符。 另外还有一个按钮，它运行一个写入操作结果的函数。 我一直在建设这一点，但是，我被困在CON dition阶段： 我想： - 如果slect +，做一个总和 - 如果选择 - 做减法 - 如果选择*做乘法 - 如果选择/做除法

这里是我的功能

function multiply() 
{ 
    var x = document.getElementById('x_value').value; 
    var y = document.getElementById('y_value').value; 
    var signal = get_operator(); 
    var u = parseInt(x,10) + parseInt(y,10); 
    var v = x - y; 
    var w = x * y; 
    var z = x/y; 

     /* 
    if(signal == plus) 
     { 
      document.getElementById('result').innerHTML = u; 
     } 

    else if(signal == minus) 
     { 
      document.getElementById('result').innerHTML = v; 
     } 

    else if(signal == times) 
     { 
      document.getElementById('result').innerHTML = w; 
     } 

    else 
     { 
      document.getElementById('result').innerHTML = z; 
     } 

     */ 

} 

请注意，我已经谈到目的的逻辑测试。 的get_operator功能运作良好

function get_operator(operator) 
{ 
    var operator = document.getElementById("operation").value; 
    return operator; 
} 

和打印结果按钮本身工作正常。 如果我把例如

function multiply() 
{ 
    var x = document.getElementById('x_value').value; 
    var y = document.getElementById('y_value').value; 
    var signal = get_operator(); 
    var u = parseInt(x,10) + parseInt(y,10); 
    var v = x - y; 
    var w = x * y; 
    var z = x/y; 

    document.getElementById('result').innerHTML = u /*[or any other of my values]*/; 

} 

所以，这个问题显然是与if/else条件测试。因为，当我使用它时，按钮停止工作。

你能不能给我一些提示？ 预先感谢您

Answer 1

您需要解析字符串到数字的所有操作，不仅增加：

x = parseInt(x, 10); 
y = parseInt(y, 10); 

你需要你的运营商比较字符串值：

if (signal == 'plus') { ... } 
else if (signal == 'minus') { ... } 
else ... 

然后固定代码如下所示：

function get_operator(operator) { 
 
    var operator = document.getElementById("operation").value; 
 
    return operator; 
 
} 
 

 
function multiply() { 
 
    var x = document.getElementById('x_value').value; 
 
    var y = document.getElementById('y_value').value; 
 
    var signal = get_operator(); 
 

 
    x = parseInt(x, 10); 
 
    y = parseInt(y, 10); 
 

 
    var u = x + y; 
 
    var v = x - y; 
 
    var w = x * y; 
 
    var z = x/y; 
 
    var z = x/y; 
 

 
    if (signal == 'plus') { 
 
    document.getElementById('result').innerHTML = u; 
 
    } else if (signal == 'minus') { 
 
    document.getElementById('result').innerHTML = v; 
 
    } else if (signal == 'times') { 
 
    document.getElementById('result').innerHTML = w; 
 
    } else { 
 
    document.getElementById('result').innerHTML = z; 
 
    } 
 

 
} 
 

 
document.getElementById("compute").addEventListener("click", function(event) { 
 
    multiply(); 
 
});

<input type="text" id="x_value"> 
 
<input type="text" id="y_value"> 
 
<select id="operation"> 
 
    <option value="plus">+</option> 
 
    <option value="minus">-</option> 
 
    <option value="times">*</option> 
 
    <option value="divide">/</option> 
 
</select> 
 
<button id="compute">Compute</button> 
 
<div id="result"></div>

- 他们是变量

const operations = { 
 
    "plus": (a, b) => a + b, 
 
    "minus": (a, b) => a - b, 
 
    "times": (a, b) => a * b, 
 
    "divide": (a, b) => a/b, 
 
} 
 

 
const compute = document.getElementById("compute"); 
 
const operator = document.getElementById("operator"); 
 
const first = document.getElementById("first-operand"); 
 
const second = document.getElementById("second-operand"); 
 
const result = document.getElementById("result"); 
 

 
compute.addEventListener("click",() => { 
 
    const operation = operations[operator.value]; 
 
    result.textContent = operation(first.valueAsNumber, second.valueAsNumber); 
 
});

<input type="number" id="first-operand"> 
 
<input type="number" id="second-operand"> 
 
<select id="operator"> 
 
    <option value="plus">+</option> 
 
    <option value="minus">-</option> 
 
    <option value="times">*</option> 
 
    <option value="divide">/</option> 
 
</select> 
 
<button id="compute">Compute</button> 
 
<div id="result"></div>