CODEWITHSUNDEEP
javascripthtmlcalculator
Jacob Frye
Jacob Frye

Reputation: 11

Javascript - Simple calculator not running

I have started learning javascript prior to work experience with a website coding business. I have coded this, but when i run the .html file, i get a blank web page. I do not know what i have done wrong. Here is the code:

<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>

Thanks in advance for anyone who can help :)

Upvotes: 1

Views: 123

Answers (3)

Fayaz
Fayaz

Reputation: 61

<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>

Upvotes: 0

Sandeep Bhaskar
Sandeep Bhaskar

Reputation: 300

You can use simple switch case and in your case you are not converting the text into integer you have to convert text to int using parseint

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>

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386578

You could assign first the values of the inputs, convert it to number with an unary + and perfor a check for the operator. The assign it with document.getElementById('calcbox4') to the value property of the input.

The reason for a blank page is the last document.write(input4);, which rewites the page.

document.all.calcbox4.value works only for old Internet Explorer. It is not a standard to assign a value.

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;
}
<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>

Upvotes: 1

Related Questions