CODEWITHSUNDEEP
javascripteventsonclick
user8664650
user8664650

Reputation:

javascript onclick evnt not working

I am trying to learn JavaScript from here . As told here I have following main.js file which will change the background color but nothing is happening when I click the button :-

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

and index.html file:-

<!DOCTYPE html>
<html>
<head>
    <title>Js</title>
    <link rel="stylesheet"  href="stylesheet.css" />
    <script src="main.js"></script>
</head>
<body>

    <button>Dont click</button>
    <p id="p1" > om !!!!</p>

</body>
</html>

When I open this firefox and click on the button nothing happens please help me :(

Upvotes: 0

Views: 1103

Answers (3)

Ele
Ele

Reputation: 33726

The best approach to avoid this kind of problems is binding the event DOMContentLoaded to wait until the DOM is fully loaded and parsed.

document.addEventListener('DOMContentLoaded', function() {
  console.log("DOM is fully loaded and ready for DOM manipulation.");

  var btn = document.querySelector('button');

  function bgChange() {
    function random() {return '0';} // Just to illustrate!
    
    var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
    document.body.style.backgroundColor = rndCol;
  }

  btn.onclick = bgChange;
});
<button>Dont click</button>
<p id="p1"> om !!!!</p>

DOMContentLoaded event

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

Upvotes: 1

user9265601
user9265601

Reputation:

Why not just

<button id="yey">Dont click</button>

and

var btn = document.getElementById("yey");

Upvotes: 0

Robbie Milejczak
Robbie Milejczak

Reputation: 5770

The issue is that your script is loading before the DOM loads, so your button doesn't exist when your javascript adds the event handler. Since DOM parsing is synchronous (it happens in order, one line at a time) you can fix this by adding your script tags to the bottom of your HTML, above your </body> tag. This is fairly common practice. 

<html>
  <head>
    <title>Js</title>
    <link rel="stylesheet"  href="stylesheet.css" />
  </head>
  <body>
    <button>Dont click</button>
    <p id="p1" > om !!!!</p>
    <script src="main.js"></script>
  </body>
</html>

There is also an attribute called defer for script tags that will accomplish the same thing. It forces the script tags to load last, and you can use it like this:

<html>
  <head>
    <title>Js</title>
    <link rel="stylesheet"  href="stylesheet.css" />
    <script defer src="main.js"></script>
  </head>
  <body>
    <button>Dont click</button>
    <p id="p1" > om !!!!</p>
  </body>
</html>

Upvotes: 3

Related Questions