Question

我是javascript的新手，我试图从输入字段中为2个值创建一个简单的计算器，并从选择下拉列表中选择一个运算符。此外，还有一个按钮，用于运行写入操作结果的函数。我一直在构建这个，然而，我陷入了这个状态的阶段：我想要： - 如果选择+，请做一笔钱 - 如果选择 - 做减法 - 如果选择*做乘法 - 如果选择/进行划分

这是我的功能

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>

如果/ else条件正在杀死我的函数

1 个答案: