基本计算器

Question

我是一个初学者JavaScript课程，我觉得我有一个相当好的掌握所有的介绍材料。我所有的家庭作业都是工作的，但它们似乎比它们要长，尤其是我最近的作业。我没有要求我的家庭作业的答案，因为它已经完成(你可以看到下面的代码工作)，但我在看是否有人能给我一些想法，使我的代码更有效率。

请不要给我提供新的代码，并说粘贴在这里，因为我真的很想考虑和学习。也许我还没有学到足够的东西，但从我在网上看到的和我重复的代码来看，这看起来很难看.我唯一需要做的就是用一个对象来构建它，一次只能显示一个答案。我不能使用jQuery或任何其他库。

var obj = {
     num1 : document.getElementById('num1'),
     num2 : document.getElementById('num2'),
     add : document.getElementById("add"),
     sub : document.getElementById("sub"),
     mult : document.getElementById("mult"),
     div : document.getElementById("div"),
     result : document.getElementById("result"),
     init : function() {
         document.getElementById("calculate").onclick = obj.calc;
     },
     calc : function() {
         var num1 = parseFloat(obj.num1.value);
         var num2 = parseFloat(obj.num2.value);
         if(isNaN(num1) || isNaN(num2)) {
             alert("You must enter a number for First Number and Second Number.");
         }
         else if (num2 === 0) {
              alert("You cannot divide by zero"); 
         }
         else {
             if (obj.add.checked === true) {
                 var result = num1 + num2;
             }
             else if (obj.sub.checked === true) {
                 var result = num1 - num2;
             }
             else if (obj.mult.checked === true) {
                 var result = num1 * num2;
             }
             else if (obj.div.checked === true) {
                 var result = num1 / num2;
             }
             else {
                 alert("Choose an operator")
             } 

            if (obj.result.firstChild){
                 var para = document.getElementById("para");
                 console.log(para);
                 para.parentNode.removeChild(para);
                 var p = document.createElement("p");
                 p.setAttribute("id", "para");
                 p.appendChild(document.createTextNode("The answer is " + result));
                 obj.result.appendChild(p);
             }
             else {
                 var p = document.createElement("p");
                 p.setAttribute("id", "para");
                 p.appendChild(document.createTextNode("The answer is " + result));
                 obj.result.appendChild(p);
             }
         }
     }
 }  

Answer 1

与其查询每个收音机是否被选中，然后在此基础上运行算法，我可能会将算法作为闭包存储在obj中，其中键是选中输入的值，然后运行document.querySelector来查找选中的输入，如下所示：

var obj = {
 num1 : document.getElementById('num1'),
 num2 : document.getElementById('num2'),
 add  : function(n1, n2) { return n1 + n2; },
 sub  : function(n1, n2) { return n1 - n2; },
 mult : function(n1, n2) { return n1 * n2; },
 div  : function(n1, n2) { return n1 / n2; },
 result : document.getElementById("result"),
 init : function() {
     document.getElementById("calculate").onclick = obj.calc;
 },
 calc : function() {
     var num1 = parseFloat(obj.num1.value),
         num2 = parseFloat(obj.num2.value),
         operation, result;

     if(isNaN(num1) || isNaN(num2)) {
        return alert("You must enter a number for First Number and Second Number.");
     }
     else if (num2 === 0) {
        return alert("You cannot divide by zero"); 
     }

    operation = document.querySelector('input[type="radio"]:checked').value;

    result = obj[operation](num1, num2);

    obj.result.innerHTML = '';           

    p = document.createElement("p");
    p.setAttribute("id", "para");
    p.appendChild(document.createTextNode("The answer is " + result));
    obj.result.appendChild(p);
 }
 }

obj.init();  

这使您不必对选中的输入进行非常长的if / else检查。我还将删除检查是否已经创建了一个P并将其添加到结果div中的逻辑，而是每次只将结果divs innerHTML设置为'‘，并再次添加P标记，因为最终结果是相同的。

Answer 2

我喜欢基尔·拉维尔的回答，但我会这样修改：

operation = document.querySelector('input[name="operation"]:checked').value;

if(isNaN(num1) || isNaN(num2)) {
    return alert("You must enter a number for First Number and Second Number.");
} 
else if (num2 === 0 && operation == div) {
    return alert("You cannot divide by zero"); 
}

1. 将查找操作的代码移至除以零检查的上方。
2. 将其更改为按名称(而不是类型)获取广播列表(以避免与新的广播列表发生冲突)
3. 在检查除以零，也检查操作员是否是除法.对于任何其他操作符，对于num2都可以使用零。

Answer 3

与普遍的看法相反，零除法并不总是灾难性的。事实上，IEEE754浮点标准指定除以零产生+∞或∞。JavaScript将数字视为IEEE双精度浮点数.，因此您可以免费获得以下行为：

> 3 / 0
Infinity
> 3 / -0
-Infinity
> 1 / 0 - 1
Infinity

你的计算器会更简单，更有用，如果你不检查除以零。