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

时间：2015-12-29 12:52:07

标签： javascript

我使用以下代码在我的网站上实现计算器：

＆＃13;
＆＃13; 
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
}
＆＃13; 
<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" VALUE=" exp " ONCLICK="if (checkNum(this.form.display.value)) { exp(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  7  " ONCLICK="addChar(this.form.display, '7')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  8  " ONCLICK="addChar(this.form.display, '8')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  9  " ONCLICK="addChar(this.form.display, '9')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   /   " ONCLICK="addChar(this.form.display, '/')">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   ln   " ONCLICK="if (checkNum(this.form.display.value)) { ln(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  4  " ONCLICK="addChar(this.form.display, '4')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  5  " ONCLICK="addChar(this.form.display, '5')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  6  " ONCLICK="addChar(this.form.display, '6')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   *   " ONCLICK="addChar(this.form.display, '*')">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE=" sqrt " ONCLICK="if (checkNum(this.form.display.value)) { sqrt(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  1  " ONCLICK="addChar(this.form.display, '1')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  2  " ONCLICK="addChar(this.form.display, '2')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  3  " ONCLICK="addChar(this.form.display, '3')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   -   " ONCLICK="addChar(this.form.display, '-')">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  sq  " ONCLICK="if (checkNum(this.form.display.value)) { square(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="  0  " ONCLICK="addChar(this.form.display, '0')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   .  " ONCLICK="addChar(this.form.display, '.')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE=" +/- " ONCLICK="changeSign(this.form.display)">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   +  " ONCLICK="addChar(this.form.display, '+')">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="    (    " ONCLICK="addChar(this.form.display, '(')">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="cos" ONCLICK="if (checkNum(this.form.display.value)) { cos(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE=" sin" ONCLICK="if (checkNum(this.form.display.value)) { sin(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE=" tan" ONCLICK="if (checkNum(this.form.display.value)) { tan(this.form) }">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="   )   " ONCLICK="addChar(this.form.display, ')')">
      </TD>
    </TR>
    <TR>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="clear" ONCLICK="this.form.display.value = 0 ">
      </TD>
      <TD ALIGN="center" COLSPAN="3">
        <INPUT TYPE="button" VALUE="backspace" ONCLICK="deleteChar(this.form.display)">
      </TD>
      <TD ALIGN="center">
        <INPUT TYPE="button" VALUE="enter" NAME="enter" ONCLICK="if (checkNum(this.form.display.value)) { compute(this.form) }">
      </TD>
    </TR>
  </TABLE>
</FORM>
＆＃13;
＆＃13;
＆＃13;

我想知道是否可以更改这些输入以使它们不包含内联JavaScript（我的理解是.click比onClick事件处理程序更受青睐）？我不知道如何在表格的框架内这样做。如果在这种情况下可能，那看起来怎么样？

4 个答案:

答案 0 :(得分：3)

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

的JavaScript库的一部分

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

＆＃13;
＆＃13; 
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);
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果您想使用纯JavaScript，请执行以下操作：

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

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

答案 1 :(得分：1)

老实说，我不会太烦心。

虽然是的，但一般情况下，你应该将你的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
    }
};

这样，你只有一个事件处理程序，这通常是一个好主意，而不是每个按钮都有一个事件处理程序。

答案 2 :(得分：0)

正在运行的JS解决方案：unobtrusive JavaScript with onclick Delegation

<强> 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();

答案 3 :(得分：-1)

你需要为每个输入控件添加id，比如

<input id="myControl">

然后在javascript中

function cos(form) {
    form.display.value = Math.cos(form.display.value);
}
$(document).ready(function(){
    $("#myControl").click($('#idOfDisplayControl'));
});
相关问题
最新问题