Question

我已经开始在网站编码业务的工作经验之前学习javascript。我编写了这个，但是当我运行.html文件时，我得到一个空白的网页。我不知道我做错了什么。这是代码：

<html>
<body>

<form>

    <p><b>CALCULATOR</b></p>

    <p><b>Enter a number to continue:</b></p>

    <p><input type="text" name="calcbox1"/></p>

    <p><b>Enter the function (+, -, *, /):</b></p>

    <p><input type="text" name="calcbox2"/></p>

    <p><b>Enter another number:</b></p>

    <p><input type="text" name="calcbox3"/></p>

    <p><input type="button" onclick="check(this.form)" value="Calculate!"/></p>

    <p><input type="reset" value="Reset"></p>

    <p><b>Answer:</b></p>

    <p><input type="text" name="calcbox4"/></p>
</form>

<script>
    function check(form) {

        var input4 = 0;

        if( form.calcbox2.value == "+" ) {

            input4 = form.calcbox1.value + form.calcbox3.value;

        }

        if( input2 == "-" ) {

            input4 = form.calcbox1.value - form.calcbox3.value;

        }

        if( input2 == "*" ) {

            input4 = form.calcbox1.value * form.calcbox3.value;


        }

        if( input2 == "/" ) {

            input4 = form.calcbox1.value / form.calcbox3.value;

        }

    }

    document.all.calcbox4.value = input4;
</script>

<script>
    document.write(input4);
</script>

</body>
</html>

提前感谢任何可以提供帮助的人：）

Answer 1

您可以先分配输入值，使用一元+将其转换为数字，然后检查运算符。将document.getElementById('calcbox4')分配给输入的value属性。

空白页面的原因是最后document.write(input4);，它会重新打印页面。

document.all.calcbox4.value仅适用于旧版Internet Explorer。分配值不是标准。

＆＃13;

function check(form) {
  var input1 = +form.calcbox1.value,
      operator = form.calcbox2.value,
      input3 = +form.calcbox3.value,
      output = 0;
  if (operator == "+") {
    output = input1 + input3;
  }
  if (operator == "-") {
    output = input1 - input3;
  }
  if (operator == "*") {
    output = input1 * input3;
  }
  if (operator == "/") {
    output = input1 / input3;
  }
  document.getElementById('calcbox4').value = output;
}

＆＃13;

<form>
  <p><b>CALCULATOR</b></p>
  <p><b>Enter a number to continue:</b></p>
  <p><input type="text" name="calcbox1" /></p>
  <p><b>Enter the function (+, -, *, /):</b></p>
  <p><input type="text" name="calcbox2" /></p>
  <p><b>Enter another number:</b></p>
  <p><input type="text" name="calcbox3" /></p>
  <p><input type="button" onclick="check(this.form)" value="Calculate!" /></p>
  <p><input type="reset" value="Reset"></p>
  <p><b>Answer:</b></p>
  <p><input type="text" id="calcbox4" /></p>
</form>

＆＃13;

Answer 2

您可以使用简单的开关案例，在您的情况下，您不会将文本转换为整数，您必须使用parseint将文本转换为int

function check(form) {

        var input4 = 0;
        //first input value
        var input1 = parseInt(form.calcbox1.value); 
        //thrid input value
        var input3 = parseInt(form.calcbox3.value);

         switch(form.calcbox2.value)
         {
            case "+":
                     input4 = input1 + input3;
                     break;
            case "-":
                     input4 = input1 - input3;
                    break;
            case "*":
                      input4 = input1 * input3;
                      break;
            case "/":
                      input4 = input1 / input3;
                      break;                
         }        
    document.all.calcbox4.value = input4;
    }

<html>
<body>

<form>

    <p><b>CALCULATOR</b></p>

    <p><b>Enter a number to continue:</b></p>

    <p><input type="text" name="calcbox1"/></p>

    <p><b>Enter the function (+, -, *, /):</b></p>

    <p><input type="text" name="calcbox2"/></p>

    <p><b>Enter another number:</b></p>

    <p><input type="text" name="calcbox3"/></p>

    <p><input type="button" onclick="check(this.form)" value="Calculate!"/></p>

    <p><input type="reset" value="Reset"></p>

    <p><b>Answer:</b></p>

    <p><input type="text" name="calcbox4"/></p>
</form>

</body>
</html>

Answer 3

<html>
<head>

<script type="text/javascript">

function clearFields(val)
{
    document.getElementById("expression").value=val;
}
function v(val)
{
    document.getElementById("expression").value+=val;
}


function eva(e) 
{ 
    try 
    { 
        clearFields(eval(document.getElementById("expression").value)) 
    } 
    catch(e) 
    {
    clearFields('Error') 
    } 
} 

validate = function(evt)
{
// Check if the keys are numbers and arithmetic operator.
// For a cross-browser solution, use the "which" property together with keyCode.
    if ([8, 13,35,46,37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36,96, 97, 98,99,100,101,102,103,104,105,106,107,109,110,111].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;// Stopping non-numeric keystrokes from reaching an edit field.
        if(evt.preventDefault){evt.preventDefault();} // For event cancellation. It tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be.
    }
}


function checkKey(event)
{
    if(event.keyCode==13) // Check for ENTER key
        eva();
    else if(event.keyCode==17) // Check for Ctrl key
        clearFields("");
    else
        validate(event);
} 

 </script>

 </head>
  <body>
  <div align="center">
  </br></br></br></br></br>

<input type="text" id="expression" style="height:50px; width:215px;" onkeydown = "checkKey(event)" />

<p>
<input type="button" value=" / " style="height:50px; width:50px; cursor:pointer; font-weight:bold; background-color: #4CAF50;  color:white; border: none; " onclick='v("/")'>
<input type="button" value=" C " style="height:50px; width:160px; background-color: #4CAF50; font-weight:bold; color:white; border: none; " onclick='clearFields("")'>
</p>
<p> 
<input type="button" value=" 7 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none; " onclick='v("7")'>
<input type="button" value=" 8 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("8")'>
<input type="button" value=" 9 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("9")'>
<input type="button" value=" * " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("*")'>
</p>
<p>
<input type="button" value=" 4 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("4")'>
<input type="button" value=" 5 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("5")'>
<input type="button" value=" 6 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("6")'>
<input type="button" value=" - " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("-")'>
</p>
<p>
<input type="button" value=" 1 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("1")'>
<input type="button" value=" 2 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("2")'>
<input type="button" value=" 3 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("3")'>
<input type="button" value=" + " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("+")'>
</p>
<p>
<input type="button" value=" 0 " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v("0")'>
<input type="button" value=" . " style="height:50px; width:50px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" onclick='v(".")'>
<input type="button" id= "calc" style="height:50px; width:105px; background-color: #4CAF50; font-weight:bold; color:white; border: none;" value=" = " onclick='eva()'>
</p>
<p align="center">Ctrl to Clear Field</p>

</div>
</body>
  </html>

Javascript - 简单的计算器没有运行

3 个答案: