Cannot read properties of null (reading 'value')

byMR

March 19, 2022

I am trying to get the value of the input number field but it returns me the said error.

HTML:
<label for="number1">Enter the First number :</label>
<input type="number" value="0" id="fornum1">

JavaScript:
var num1 = document.getElementById("fornum1").value;

The whole point of the website is to create a basic calculator that uses buttons to display outputs on a input field.

var num1;
var num2;
var answer;

num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;

console.log(num1)

function addition() {
  answer = num1 + num2;
  document.getElementById("sum").value = answer;
}

function subtraction() {
  answer = num1 - num2;
  document.getElementById("minus").value = answer;
}

function multiplication() {
  answer = num1 * num2;
  document.getElementById("product").value = answer;
}

function division() {
  answer = num1 / num2;
  document.getElementById("divs").value = answer;
}

#div1 {
  height: 300px;
  width: 500px;
  background-color: plum;
  margin: auto;
  padding: 5%;
}

body {
  font-family: Courier;
}

label {
  width: 300px;
  display: inline-block;
}

#div2 input {
  width: 120px;
}

<script src="myscripts.js"></script>
<div id="div1">
  <p style="text-align: center;">FOUR BASIC OPERATIONS</p>

  <label for="number1">Enter the First number :</label>
  <input type="number" value="0" id="fornum1">
  <br><br>

  <label for="number2">Enter the Second number:</label>
  <input type="number" value="0" id="fornum2">
  <br><br><br><br>

  <div align="center" id="div2">
    <button type="button" onclick="addition()">Add</button>
    <input type="text" id="sum" readonly>
    <button type="button">Subtraction </button>
    <input type="text" id="minus" onclick="subtraction()" readonly>
    <br><br><br>

    <button type="button">Multiplication</button>
    <input type="text" id="product" onclick="multiplication()" readonly>
    <button type="button">Division</button>
    <input type="text" id="divs" onclick="division()" readonly>
  </div>


</div>

>Solution :

First of all, as @mplungjan suggested in the comments, move the script:src to after the </body> tag. Next, you declare num1 and num2 in the start of the script, meaning if the input’s values will change the program will still have num1 and num2 set to 0. So all you need to do is when the button is clicked, check the input’s values again for a change. Lastly, the checking the input’s values returns a string, not a number as you would want in a calculator. So all you need to do is convert the string into a number, using ParseInt.

var num1;
var num2;
var answer;

num1 = document.getElementById("fornum1").value;
num2 = document.getElementById("fornum2").value;

function addition() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 + num2;
    document.getElementById("sum").value = answer;
}

function subtraction() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 - num2;
    document.getElementById("minus").value = answer;
}

function multiplication() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 * num2;
    document.getElementById("product").value = answer;
}

function division() {
    num1 = document.getElementById("fornum1").value;
    num2 = document.getElementById("fornum2").value;
    num1 = parseInt(num1)
    num2 = parseInt(num2)
    answer = num1 / num2;
    document.getElementById("divs").value = answer;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Four Basic Operators</title>
        <style>
            #div1 {
                height: 300px;
                width: 500px;
                background-color: plum;
                margin: auto;
                padding: 5%;
            }
            body {
                font-family: Courier;
            }
            label {
                width: 300px;
                display: inline-block;
            }
            #div2 input {
                width: 120px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <p style="text-align: center;">FOUR BASIC OPERATIONS</p>
            
            <label for="number1">Enter the First number :</label>
            <input type="number" value="0" id="fornum1">
            <br><br>

            <label for="number2">Enter the Second number:</label>
            <input type="number" value="0" id="fornum2">
            <br><br><br><br>

            <div align="center" id="div2">
                <button type="button" onclick="addition()">Add</button>
                <input type="text" id="sum" readonly>
                <button type="button" >Subtraction </button>
                <input type="text" id="minus" onclick="subtraction()" readonly>
                <br><br><br>

                <button type="button">Multiplication</button>
                <input type="text" id="product" onclick="multiplication()" readonly>
                <button type="button">Division</button>
                <input type="text" id="divs" onclick="division()" readonly>
            </div>
           
            
        </div>
    </body>
        <script src="script.js"></script>
</html>