How to use the JavaScript code from a js file

Question

I am trying to use the JavaScript code from a .js file. My code works fine when I keep this code in the .html file within the script tags.

What changes should I make when I move the script to a .js file.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Cat Clicker</title>
    <script type="text/javascript" src="js/app.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id='cc'><img src="images/cat1.png"><br /></div>
    <div>The number of times you clicked the cat is:</div><br />
    <div id='times'>0</div>
</body>
</html>

JS:

var pic = document.getElementById('cc');
pic.addEventListener('click', function() {
    var count = document.getElementById('times').innerHTML;
    count = parseInt(count) + 1;
    document.getElementById('times').innerHTML = count;
}, false);

Have you tried anything?

u_mulder
– u_mulder

2015-04-11 11:07:03 +00:00
Commented Apr 11, 2015 at 11:07 — u_mulder
– u_mulder, Commented Apr 11, 2015 at 11:07

mohamedrias · Accepted Answer · 2015-04-11 11:09:04Z

2

You must wrap that code inside window.onload to make it run after all the DOM elements are loaded.

window.onload = function() {
 var pic = document.getElementById('cc');
 pic.addEventListener('click', function() {
     var count = document.getElementById('times').innerHTML;
     count = parseInt(count) + 1;
     document.getElementById('times').innerHTML = count;
 }, false);
}

Else just move the script tag to the bottom of the page just above </body>

<!DOCTYPE html>
<html>
<head>
    <title>Cat Clicker</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id='cc'><img src="images/cat1.png"><br /></div>
    <div>The number of times you clicked the cat is:</div><br />
    <div id='times'>0</div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

answered Apr 11, 2015 at 11:09

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua Arvin Lat · Accepted Answer · 2015-04-11 11:08:51Z

It's possible that your JavaScript code attempted to get an element which has not been rendered by the browser.

Solution # 1

You can try loading the JavaScript file after all elements have been rendered like this:

<!DOCTYPE html>
<html>
<head>
    <title>Cat Clicker</title>  
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id='cc'><img src="images/cat1.png"><br /></div>
    <div>The number of times you clicked the cat is:</div><br />
    <div id='times'>0</div>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Solution # 2

You can also try using jQuery and do the following:

$(function(){
    // and also convert this to its jQuery counterpart
    var pic = document.getElementById('cc');
    pic.addEventListener('click', function() {
        var count = document.getElementById('times').innerHTML;
        count = parseInt(count) + 1;
        document.getElementById('times').innerHTML = count;
    }, false);
})

If these didn't work, try using the Chrome developer tools and check if js/app.js is pointing to the JavaScript file

Collectives™ on Stack Overflow

How to use the JavaScript code from a js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related