Question

开发人员工具/疑难解答告诉我，HTMLButtonElement.onclick中未定义计算器。一切正常，除了我没有得到答案。有谁看到我做错了什么？我举了一个例子，一个例子有效。但不是我的代码。当我点击按钮时，我得到了四个按钮和两个文本字段，但没有答案，文本字段中有数字。

之前发布过这个，但第一次没有发布整个代码。只有当我编辑它时。

<!DOCTYPE html>
       <html>
         <head>
           <title>oppg.3</title>
         </head>
       <body>

         <input id="v1" type="text" style="width:5em;"/>
         <button onclick="calculator.sum();"> + </button>
         <button onclick="calculator.multiply();"> * </button>
         <button onclick="calculator.div();"> / </button>
         <button onclick="calculator.mod();"> % </button>
         <input id="v2" type="text" style="width:5em;"/>
         <span id="result"> </span>


       <script type="text/javascript">
    var Calculator = function(inp1,inp2,reslt) {
        this.valinp1 = inp1;
        this.valinp2 = inp2;
        this.result = reslt;
        if (!Calculator.prototype.sum) {
          Calculator.prototype.sum = function() {
            var value1 = Number(this.valinp1.value),
                value2 = Number(this.valinp2.value);

                this.result.innerHTML =
                 (!/[0-9]/.test(String(value1)) || !/[0-9]/.test(String(value1)))
                 : (value1 + value2);
            };
            Calculator.prototype.multiply = function() {
              var value1 = Number(this.valinp1.value);
              var value2 = Number(this.valinp2.value);
              this.result.innerHTML =
                (!/[0-9]/.test(string(value1)) || !/[0-9]/.test(string(value1)))
                :(value1*value2);

            };
            Calculator.prototype.div = function() {
               var value = Number(this.valinp1.value);
               var value2 = Number(this.valinp2.value);
               var restmp = value1/value2;
               this.result.innerHTML =
                 (!/[0-9]/.test(String(value1)) || !/[0-9]/.test(String(value1)) || value2 === 0)
                 : restmp%1 ? restmp.toFixed(3) : restmp;
            };
            Calculator.prototype.mod = function() {
              var value1 = Number(this.valinp1.value);
              var value2 = Number(this.valinp2.value);
              var restmp = value1%value2;
              this.result.innerHTML =
              (!/[0-9]/.test(String(value1)) || !/[0-9]/.test(String(value1)) || value2 === 0)
              : value1%value2;

            };
          }
      };
      calculator =
         new Calculator (
             document.getElementById('v1'),
             document.getElementById('v2'),
             document.getElementById('result')
        );
        </script>


      </body>
    </html>

Answer 1

在浏览器中打开开发人员工具。看看控制台。阅读错误消息。 首先解决第一个问题。后续问题通常是早期问题的结果。

SyntaxError：意外的令牌：

或者通过JS Hint运行代码，这可以提供更多有用的错误消息：

预期'}'匹配第6行的'{'，而不是'：'。

看起来您正在尝试编写ternary operator，但忘记了?字符和替代状态。

你多次犯过这个错误。

Answer 2

<!DOCTYPE html>
   <html>
     <head>
       <title>oppg.3</title>
     </head>
   <body>

     <input id="v1" type="text" style="width:5em;"/>
     <button onclick="calculator.sum();"> + </button>
     <button onclick="calculator.multiply();"> * </button>
     <button onclick="calculator.div();"> / </button>
     <button onclick="calculator.mod();"> % </button>
     <input id="v2" type="text" style="width:5em;"/>
     <span id="result"> </span>


   <script type="text/javascript">
var Calculator = function(inp1,inp2,reslt) {
    this.valinp1 = inp1;
    this.valinp2 = inp2;
    this.result = reslt;
    if (!Calculator.prototype.sum) {
      Calculator.prototype.sum = function() {
        var value1 = Number(this.valinp1.value),
            value2 = Number(this.valinp2.value);

            this.result.innerHTML =
             !/[0-9]/.test(String(value1)) ? !/[0-9]/.test(String(value1))
             : (value1 + value2);
        };
        Calculator.prototype.multiply = function() {
          var value1 = Number(this.valinp1.value);
          var value2 = Number(this.valinp2.value);
          this.result.innerHTML =
            !/[0-9]/.test(String(value1)) ? !/[0-9]/.test(String(value1))
            :(value1*value2);

        };
        Calculator.prototype.div = function() {
           var value = Number(this.valinp1.value);
           var value2 = Number(this.valinp2.value);
           var restmp = value1/value2;
           this.result.innerHTML =
             !/[0-9]/.test(String(value1)) ? !/[0-9]/.test(String(value1)) || value2 === 0
             : restmp%1 ? restmp.toFixed(3) : restmp;
        };
        Calculator.prototype.mod = function() {
          var value1 = Number(this.valinp1.value);
          var value2 = Number(this.valinp2.value);
          var restmp = value1%value2;
          this.result.innerHTML =
          !/[0-9]/.test(String(value1)) ? !/[0-9]/.test(String(value1)) || value2 === 0
          : value1%value2;

        };
      }
  };
  calculator =
     new Calculator (
         document.getElementById('v1'),
         document.getElementById('v2'),
         document.getElementById('result')
    );
    </script>


  </body>
</html>

您使用||代替三元并在乘法函数中使用string代替String，从而产生了一些错误。上面的代码应该可以正常使用

未捕获的ReferenceError：计算器未在HTMLButtonElement.onclick上定义，

2 个答案: