Getting a cannot read property 'value' of null error in my codes

Question

I'm a new college student in website design and I have been trying to get this to work, but I can't figure out why its not returning what I want since I defined the variables, at least I hope I got them all. I was creating a program that calculates the time elapsed from the current day to the date inputted by the user.

When I test this through the browser console on Chrome, it tells me Uncaught TypeError: Cannot read property 'value' of null at HTMLInputElement.calculateElapsedTime, referring to the "var month" line.

Is there anything I'm missing? I went over my notes but coding is a bit frustrating.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Time Elapsed</title>
   <link rel="stylesheet" href="styles.css">
</head> 

<body>
<div id="wrapper">
    <header>
    <h1>Time elapsed</h1>
    </header>
<main>
<p>Please enter a date in numeric format to calculate time elapsed since that date.</p>

<form>
    <fieldset>
        <legend>Enter a month (Numberic)</legend>
        <input type="number" id "monthinput"/>
    </fieldset>
    
    <fieldset>
        <legend>Enter a day</legend>
        <input type="number" id="dayinput" />
    </fieldset>
        
    <fieldset>
        <legend>Enter a year</legend>
        <input type="number" id="yearinput" />
    </fieldset>
    
    <fieldset id="submitBttn">
        <input type="button" id= "submitBtn" value="Submit"/>
    </fieldset>
</form>

<section>
    <h2>Result: </h2><div id="results"></div>
</section>
    
</main>
<small><div align="center"><i>2021</i></div></small>    
</div>
 <script>
 "use strict";

 function calculateElapsedTime() {
        var month = document.getElementById("monthinput").value;
        var day = document.getElementById("dayinput").value;
        var year = document.getElementById("yearinput").value;

        var now = new Date();
        var then = new Date(year, month-1, day);

        var elapsedTime = now - then;

        var seconds = Math.abs(elapsedTime / 1000);

        var years = Math.floor(seconds / 31536000);
        var days = Math.floor((seconds % 31536000) / 86400);
        var hours = Math.floor(((seconds % 31536000) % 86400) / 3600);
        var minutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
        var seconds = (((seconds % 31536000) % 86400) % 3600) % 60;

        var leapYears = 0;
        if(then.getFullYear() < now.getFullYear()) {
            for (var i = then.getFullYear(); i <= now.getFullYear(); i++) {
                if (isLeapYear(i)) {
                    if(!(then.getFullYear() === now.getFullYear())) {
                        leapYears++;
                    }
                }
            }
        } else {
            for (var i = now.getFullYear(); i <= then.getFullYear(); i++) {
                if (isLeapYear(i)) {
                    leapYears++;
                }
            }
        }


        document.getElementById("results").innerHTML = "<p>" + years + " year(s) " + days + "day(s)"+ hours + " hour(s) " + minutes + " minute(s) " + seconds.toFixed(0) + "second(s)</p>";

        if(leapYears > 0){
            document.getElementById("results").innerHTML += "Leap years = " + leapYears;
        }
    }



    function isLeapYear(year)
    {
        return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
    }



    var submitButton = document.getElementById("submitBtn");
    if (submitButton.addEventListener) {
        submitButton.addEventListener("click", calculateElapsedTime, false);
    } else if (submitButton.attachEvent) {
        submitButton.attachEvent("onclick", calculateElapsedTime);
    }

 </script>
</body>
</html>

What is the actual problem? You should read the error message, note that it states "property 'value'", see you only have that three times, all the `.getElementById("monthinput").value`, realize the only way is [it doesn't find the element](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element), and search for the cause. Alternatively, if the location wasn't as obvious, you should use a debugger. — ASDFGerte, Mar 18 '21 at 21:53

score 1 · Answer 1 · answered Mar 18 '21 at 21:52

1

You have a typo in your html code, you're missing an = sign It should be

<input type="number" id="monthinput"/>

and not

<input type="number" id "monthinput"/>

The error should disappear after you fix this

answered Mar 18 '21 at 21:52

salam

76
6

Getting a cannot read property 'value' of null error in my codes

1 Answers1