CODEWITHSUNDEEP
javascriptsyntax-error
Luis Fernando
Luis Fernando

Reputation: 25

Uncaught ReferenceError: load is not defined

I'm making a site that, depending on the user's time of the day, will show a night, afternoon or morning image. But as it seems, the JS isn't working due to a Syntax Error on calling the function with "onload=" in the tag <body>. My VS Code Javascript higlighter isn't working on the words window, document nor getElementById. Which part of my JS could be wrong?

Here's the HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <script type="javascript" src="/script.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie-edge">
        <link rel="stylesheet" href="/style.css">
    </head>
    <body onload="load()">
        
        <section>
            <div id="msg">
                Message here
            </div>
            <div id="foto">
                <img id="image" src="img/afternoon.png">
            </div>
        </section>
        
        <footer>
            <p>&copy; Koala</p>
        </footer>
    </body>
</html>

And here's the JS

function load(){
    var msg = window.document.getElementById('msg');
    var img = window.document.getElementById('image');
    var dt = new.Date();
    var hour = dt.getHours();
    msg.innerHTML = 'Now it is ${hour} hours.';
    if (hour>= 0 && hour < 12) {
        img.src = 'img/morning.png';
    } else if (hour => 12 && hour < 18) {
        img.src = 'img/afternoon.png';
    } else {
        img.src = 'img/night.png';
    }
}

PS: I've tried running it on Mozilla and Chrome. No success.

Upvotes: 1

Views: 2729

Answers (1)

Robert Cooper
Robert Cooper

Reputation: 2240

The error appears to be with this line:

var dt = new.Date();

To instantiate a new Date object, you need to use this syntax:

var dt = new Date();

Once this syntax error is fixed, then the JS file should be loaded properly and then the onload attribute will be able to fire the load function.

Here's a working demo: https://codesandbox.io/s/stack-overflow-onload-8opgp?file=/script.js

Upvotes: 3

Related Questions