CODEWITHSUNDEEP
javascript
BenjB
BenjB

Reputation: 165

Calculator Project for Uni - JavaScript Code not working

I am following a Uni class on JavaScript, which purpose is to make a simple calculator, that performs simple operations on two numbers. The following is the HTML code I have made:

<html>
<head>
    <title>Simple Maths with JavaScript</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
</head>
<body>
    <h2>Simple Maths</h2>
    <p>
    Value 1: 
    <input type="text" id="value1" value="0"/>
    </p>
    <p>
    Value 2: 
    <input type="text" id="value2" value="0"/>
    </p><p>
    Result:  
    <input type="text" id="result" value="0" readonly="readonly"/>
    </p>
    <input type="button" value="+" onclick="doAdd()"/>
    <input type="button" value="-" onclick="doSub()"/>
    <input type="button" value="*" onclick="doMul()"/>
    <input type="button" value="/" onclick="doDiv()"/>
</body>

Then I made an external JavaScript Code for all the functions:

function doAdd() {
  var value1 = new number(document.getElementById("value1").value);
  var value2 = new number(document.getElementById("value2").value);
  document.getElementById("result").setAttribute("value", value1 + value2);
}

function doSub() {
  var value1 = new number(document.getElementById("value1").value);
  var value2 = new number(document.getElementById("value2").value);
  document.getElementById("result").setAttribute("value", value1 - value2);
}

function doMul() {
  var value1 = new number(document.getElementById("value1").value);
  var value2 = new number(document.getElementById("value2").value);
  document.getElementById("result").setAttribute("value", value1 * value2);
}

function doDiv() {
  var value1 = new number(document.getElementById("value1").value);
  var value2 = new number(document.getElementById("value2").value);
  document.getElementById("result").setAttribute("value", value1 / value2);
}

Note: <!doctype>, header, comments, etc. have been left out purposely here, to shorten the code.

Now, when I run the page, it does nothing. I add two numbers and click the buttons but they won't do anything. Also tried to change the value1 and value2 attributes, so that contain a number (ex. 5 and 5) but it still won't work. The script seems to be working fine however (linking, etc.) since document.write("Hello, I am working!"); which I had added for testing purposes, did display just fine.

I have checked the code in the class materials as well as the hints like 10 times. I can't seem to find out why it is not working... Any advice would be appreciated.

Upvotes: 1

Views: 63

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

This is an issue with case-sensitivity
1. Change your onclick from DoAdd() to doAdd()
2. Change new number() to new Number() See this Reference

<h2>Simple Maths</h2>
<p>
  Value 1:
  <input type="text" id="value1" value="0" />
</p>
<p>
  Value 2:
  <input type="text" id="value2" value="0" />
</p>
<p>
  Result:
  <input type="text" id="result" value="0" readonly="readonly" />
</p>
<input type="button" value="+" onclick="doAdd()" />
<input type="button" value="-" onclick="doSub()" />
<input type="button" value="*" onclick="doMul()" />
<input type="button" value="/" onclick="doDiv()" />

<script>
  function doAdd() {
    var value1 = new Number(document.getElementById("value1").value);
    var value2 = new Number(document.getElementById("value2").value);
    document.getElementById("result").setAttribute("value", value1 + value2);
  }

  function doSub() {
    var value1 = new Number(document.getElementById("value1").value);
    var value2 = new Number(document.getElementById("value2").value);
    document.getElementById("result").setAttribute("value", value1 - value2);
  }

  function doMul() {
    var value1 = new Number(document.getElementById("value1").value);
    var value2 = new Number(document.getElementById("value2").value);
    document.getElementById("result").setAttribute("value", value1 * value2);
  }

  function doDiv() {
    var value1 = new Number(document.getElementById("value1").value);
    var value2 = new Number(document.getElementById("value2").value);
    document.getElementById("result").setAttribute("value", value1 / value2);
  }
  
</script>

Upvotes: 2

Related Questions