在计算表单中使用.click而不是onClick

.click实际上并不是JavaScript本身的一部分。它是名为jQuery的JavaScript库的一部分

如果你使用jQuery，你的代码应该是这样的：

function addChar(input, character) {
  if (input.value == null || input.value == "0")
    input.value = character
  else
    input.value += character
}
function cos(form) {
  form.display.value = Math.cos(form.display.value);
}
function sin(form) {
  form.display.value = Math.sin(form.display.value);
}
function tan(form) {
  form.display.value = Math.tan(form.display.value);
}
function sqrt(form) {
  form.display.value = Math.sqrt(form.display.value);
}
function ln(form) {
  form.display.value = Math.log(form.display.value);
}
function exp(form) {
  form.display.value = Math.exp(form.display.value);
}
function deleteChar(input) {
  input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input) {
  if (input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length)
  else
    input.value = "-" + input.value
}
function compute(form) {
  form.display.value = eval(form.display.value)
}
function square(form) {
  form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) {
  for (var i = 0; i < str.length; i++) {
    var ch = str.substring(i, i + 1)
    if (ch < "0" || ch > "9") {
      if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch != ")") {
        alert("invalid entry!")
        return false
      }
    }
  }
  return true
}
$('#button-exp').click(function() {
  if (checkNum(this.form.display.value)) {
    exp(this.form)
  }
});
$('#button-divide').click(function() {
  addChar(this.form.display, '/')
});
$('#button-ln').click(function() {
  if (checkNum(this.form.display.value)) {
    ln(this.form)
  }
});
$('#button-sqrt').click(function() {
  if (checkNum(this.form.display.value)) {
    sqrt(this.form)
  }
});
$('#button-minus').click(function() {
  addChar(this.form.display, '-')
});
$('#button-multiply').click(function() {
  addChar(this.form.display, '*')
});
$('#button-square').click(function() {
  if (checkNum(this.form.display.value)) {
    square(this.form)
  }
});
$('#button-dot').click(function() {
  addChar(this.form.display, '.')
});
$('#button-plus').click(function() {
  addChar(this.form.display, '+')
});
$('#button-pos').click(function() {
  changeSign(this.form.display)
});
$('#button-cos').click(function() {
  if (checkNum(this.form.display.value)) {
    cos(this.form)
  }
});
$('#button-sin').click(function() {
  if (checkNum(this.form.display.value)) {
    sin(this.form)
  }
});
$('#button-tan').click(function() {
  if (checkNum(this.form.display.value)) {
    tan(this.form)
  }
});
$('#button-cb').click(function() {
  addChar(this.form.display, ')')
});
$('#button-clear').click(function() {
  this.form.display.value = 0
});
$('#button-bsp').click(function() {
  deleteChar(this.form.display)
});
$('#button-enter').click(function() {
  if (checkNum(this.form.display.value)) {
    compute(this.form)
  }
});
$.each([1, 2, 3, 4, 5, 6, 7, 8, 9, 0], function(i, e) {
  $('#button-' + e).click(function() {
    addChar(this.form.display, e);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<FORM NAME="sci-calc">
  <TABLE CELLSPACING="0" CELLPADDING="1">
    <TR>
      <TD COLSPAN="5" ALIGN="center">
        <INPUT NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID='button-exp' VALUE=" exp ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-7" VALUE="  7  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-8" VALUE="  8  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-9" VALUE="  9  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-divide" VALUE="   /   ">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-ln" VALUE="   ln   ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-4" VALUE="  4  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-5" VALUE="  5  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-6" VALUE="  6  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-multiply" VALUE="   *   ">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-sqrt" VALUE=" sqrt ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-1" VALUE="  1  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-2" VALUE="  2  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-3" VALUE="  3  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-minus" VALUE="   -   ">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-square" VALUE="  sq  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-0" VALUE="  0  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-dot" VALUE="   .  ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-pos" VALUE=" +/- ">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-plus" VALUE="   +  ">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-ob" VALUE="    (    " ONCLICK="addChar(this.form.display, '(')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-cos" VALUE="cos">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-sin" VALUE=" sin">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-tan" VALUE=" tan">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-cb" VALUE="   )   ">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-clear" VALUE="clear">
      </TD>
      <TD ALIGN="center" COLSPAN="3">
        <INPUT TYPE="button" ID="button-bsp" VALUE="backspace">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" ID="button-enter" VALUE="enter" NAME="enter" ONCLICK="">
      </TD>
    </TR>
  </TABLE>
</FORM>

如果你想用纯JavaScript做这件事，可以这样做：

document.querySelector('#button-sin').addEventListener(function() {
  if (checkNum(this.form.display.value)) {
    sin(this.form)
  }
});

当然，可以进一步改进，但这满足了您的需求。

老实说，我不会太麻烦。

虽然是的，但通常情况下，您应该将javascript保存在javascript中，将html保存在html中，但没有绝对的必要这样做，如果它有效。。。为什么要更改它？

然而，我建议这样做：

定义你的按钮：

<button type="button" data-value="1">1</button>
<button type="button" data-function="sin">sin</button>

然后，在定义事件处理程序时，您可以在表单上执行此操作：

form.onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    while( t.nodeName != "BUTTON" && t != this) t = t.parentNode;
    if( t.nodeName == "BUTTON") {
        // so we have a button...
        if( t.getAttribute("data-value")) {
            addChar(t.getAttribute("data-value"));
        }
        if( t.getAttribute("data-function")) {
            form.display.value = Math[t.getAttribute("data-function")](form.display.value);
        }
        // define more button types here
    }
};

通过这种方式，您只有一个事件处理程序，这通常是一个好主意，而不是为每个按钮都有一个事件处理器。

一个有效的JS解决方案：带有onclick Delegation 的不引人注目的JavaScript

HTML

<FORM NAME="sci-calc">
<TABLE CELLSPACING="0" CELLPADDING="1">
<TR>
<TD COLSPAN="5" ALIGN="center"><INPUT id="results_input" NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25"></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" exp "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  7  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  8  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  9  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   /   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   ln   "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  4  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  5  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  6  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   *   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  1  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  2  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  3  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   -   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  sq  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  0  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   .  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   +  "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="    (    "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="cos"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   )   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="clear"></TD>
<TD ALIGN="center" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="enter" NAME="enter"></TD>
</TR>
</TABLE>
</FORM>

Javascript

function setOnClick() {
  document.onclick = function(e) {
    var resultsInput = document.getElementById("results_input");
    var target = e.target;
    if (target.tagName === "INPUT") {
        var trimmedValue = target.value.trim();
            switch (true){
        case trimmedValue == "enter":
            if (checkNum(resultsInput)) { compute(resultsInput) }   
        break;
        case trimmedValue == "clear":
            resultsInput.value = 0;
        break;
        case trimmedValue == "backspace":
            deleteChar(resultsInput)
        break;
        case (trimmedValue === "ln" || trimmedValue === "exp" || trimmedValue === "sq" || trimmedValue === "sqrt" || trimmedValue === "cos" || trimmedValue === "tan"):
            if (checkNum(resultsInput)) { 
            if (trimmedValue === "ln") {
                trimmedValue = "log";
            }
            else if (trimmedValue === "sq") {
              resultsInput.value = eval(resultsInput.value) * eval(resultsInput.value)
              break;
            }
            resultsInput.value = eval(Math[trimmedValue](resultsInput.value));
          } 
        break;
                default:
            addChar(resultsInput, target.value);    
        break;
      }
    }
  }
}
function addChar(input, character) {
    if(input.value == null || input.value == "0")
        input.value = character.trim();
    else
        input.value += character.trim();
}

function deleteChar(input) {
    input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input) {
    if(input.value.substring(0, 1) == "-")
        input.value = input.value.substring(1, input.value.length)
    else
        input.value = "-" + input.value
}
function compute(resultsInput) {
    resultsInput.value = eval(resultsInput.value)
}
function checkNum(str) {
console.log("str: ",str);
    for (var i = 0; i < str.length; i++) {
        var ch = str.substring(i, i+1)
        if (ch < "0" || ch > "9") {
            if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
            && ch != "(" && ch!= ")") {
            alert("invalid entry!")
            return false
            }
        }
    }
    return true
}
setOnClick();

U需要为每个输入控件（如）添加id

<input id="myControl">

然后在javascript 中

function cos(form) {
    form.display.value = Math.cos(form.display.value);
}
$(document).ready(function(){
    $("#myControl").click($('#idOfDisplayControl'));
});