Jcfg.J Jcfg.J - 4 months ago 8
Javascript Question

onClick wont work in non-inlined javascript

So I am following a javascript demo from firefox (https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics), and I practically copied and pasted the last demo on the site.

index.html:

<html>
<head>

<h1>Hello there</h1>

</head>
<body>
<button>Change user</button>
<script src = "app.js"></script>

</body>
</html>


and app.js:

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

var myHeading = document.querySelector('h1');

function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'Mozilla is cool, ' + myName;
}

if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

myButton.onclick = function() {
setUserName();
}


I click the button on the webpage, but nothing happens... Any suggestions?

Answer

I suspect it is because your JavaScript element selecting and therefore the button event binding is executing before the DOM has loaded. You can use

document.addEventListener("DOMContentLoaded", function(event) { 
  // add all the JS here so that the DOM is loaded when you 
  // run your selector.
});

Or if you are going to use jQuer you can use the $(document).ready() function