Cannot read properties of null (reading 'value')-CodePudding

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>

CodePudding user response：

TLDR:

<script defer src="myscripts.js" defer/>

window.addEventListener("DOMContentLoaded", () => {/\*code here\*/}

When your browser tries parse the HTML you wrote it reads it top to bottom.

The first thing it reads is your script tag. So your browser pulls in the script and then runs it immediately. Then it continues to parse the rest of the file. But because your script runs right away your input elements have not been loaded yet.

There are 2 good solutions to this problem and 1 bad one:

Solution 1:

Add a defer attribute to your script tag. The defer tag will tell your browser to not block the parsing of your html.

<script src="myscripts.js" defer></script>

more documentation on the defer tag here

Solution 2:

Instead of making your script run right away make your script create a listener for when the page is done loading and have the listener call your script

window.addEventListener("DOMContentLoaded", () => {
    let value = document.getElementById("fornum1").value;
    console.log(value);
}

quick note for supporting legacy browsers: you can also set the document.onload property to an anonymous function but if you do so you should first check to see if it is already defined and make sure to call the existing function if one already exists after your function is called. Avoid this though because it is bad practice.

Solution 3: (the bad one)

If for some reason you do not want to use ether method you can always change the order of your tags to have the script tag at the end of your document. You should avoid this however because your script tags should generally be in the <head> of your document.

In the end you should try and use option 1 as its the most well contained and lets your code exist as only your code without sugar to make it play nice with the browser. It also gets ran before the page load event gets triggered so if for some reason you had something else that got triggered on page load this code would get ran before that.

CodePudding user response：

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>