Question

所以我试图为我的JavaScript类制作一个计算器。我的教授给了我一个拉链文件，其中包含空的JavaScript文件，以及CSS和其他文件（所以我没有构建计算器的实际设计，只是添加JS文件中的函数，以便它可以添加，减去，乘以，除以）。

除了一件事以外，一切正常：我的教授说，如果输入计算器的两个数字中的任何一个（一次只能拿两个）是空的或不是数字，计算器不应该输出任何东西，答案框应该是空白的。但是，无论我调整代码多少，我都无法做到这一点。我已经尝试了所有我能想到的东西，但当两个数字框中的一个为空时它仍在答案框中显示内容（如果我输入一个字母或其他东西，它会在答案框中显示NaN - 但它应该是空白的）。请帮忙。

这是我的代码：

var operand1 = document.getElementById("operand1");
var operand2 = document.getElementById("operand2");
var answer = document.getElementById("answer"); 

function tester(num1, num2) {
    if (num1 || num2 == null) {
        return false;
    } else if (isNaN(num1) || isNaN(num2)) {
        return false;
    } else {
        return true;
    }
}
function getOperation(operation) {
  if (operation === "add" && tester(operand1.value, operand2.value) == true) {
    return function (){
        answer.value = Number(operand1.value) + Number(operand2.value);
    } 
  }
  if (operation === "subtract" && tester(operand1.value, operand2.value) == true) {
    return function (){
        answer.value = Number(operand1.value) - Number(operand2.value);
    }
  }
  if (operation === "multiply" && tester(operand1.value, operand2.value) == true) {
    return function (){
        answer.value = Number(operand1.value) * Number(operand2.value);
    }
  }
  if (operation === "divide" && tester(operand1.value, operand2.value) == true) {
    return function (){
        answer.value = Number(operand1.value) / Number(operand2.value);
    }
  }
}

document.getElementById("add").onclick = getOperation("add");
document.getElementById("subtract").onclick = getOperation("subtract");
document.getElementById("multiply").onclick = getOperation("multiply");
document.getElementById("divide").onclick = getOperation("divide");

Answer 1

要检查null，请执行以下操作：

 if (num1 === null || num2 === null)

您的条件（num1 || num2 == null）将检查作为num1 ||结果的布尔变量num2等于null。

Answer 2

您的代码中存在多个问题

(num1 || num2 == null检查num1是否真实且num2不为空，您需要检查num1和num2是否包含任何内容
测试应该在事件调用中进行，因此它应该转到事件处理方法

所以

＆＃13;

var operand1 = document.getElementById("operand1");
var operand2 = document.getElementById("operand2");
var answer = document.getElementById("answer");

function tester(num1, num2) {
  num1 = num1.trim();
  num2 = num2.trim();
  return num1 && num2 && !isNaN(num1) && !isNaN(num2);
}

function getOperation(operator) {
  return function() {
    if (tester(operand1.value, operand2.value)) {
      answer.value = operator(Number(operand1.value), Number(operand2.value));
    } else {
      answer.value = '';
    }
  }
}

document.getElementById("add").onclick = getOperation(function(num1, num2) {
  return num1 + num2;
});
document.getElementById("subtract").onclick = getOperation(function(num1, num2) {
  return num1 - num2;
});
document.getElementById("multiply").onclick = getOperation(function(num1, num2) {
  return num1 * num2;
});
document.getElementById("divide").onclick = getOperation(function(num1, num2) {
  return num1 / num2;
});

＆＃13;

<input id="operand1" />
<input id="operand2" />
<br />
<input id="answer" readonly />
<br />
<input type="button" id="add" value="Add" />
<input type="button" id="subtract" value="Subtract" />
<input type="button" id="multiply" value="multiply" />
<input type="button" id="divide" value="Divide" />

＆＃13;

JavaScript计算器无法运行

2 个答案: