CODEWITHSUNDEEP
javascript
Varshha Tiwarrii
Varshha Tiwarrii

Reputation: 13

Color Change On Click -- not working

I am trying to write this basic JS where the h1 tag changes color on click. The console does not throw any error but when I click on the h1, the color does not change. I don't understand what I am missing or where have I gone wrong. Can someone please nudge me in the right direction?

function init() {
  var h1tag = document.getElementsByTagName("h1")
  h1tag[0].onClick = changeColor
}

function changeColor() {
  this.innerHTML = "Click Again"

  var randomColor =  "#" + Math.floor(Math.random() * 16777215).toString(16)

  this.style.color = randomColor
}

onload = init
<!DOCTYPE html>
<html>
  <head>
    <title>Html by banas</title>
  </head>
  <body>
    <h1>Change with a click</h1>
  </body>
</html>

Upvotes: 0

Views: 94

Answers (4)

poke
poke

Reputation: 387677

Technically, the only thing that is wrong with your code is the onClick. The on-event handlers are generally written in all lowercase. So you need to do h1tag[0].onclick = changeColor.

Note though that using those event handlers is generally not advised. They are very limited and using them is often considered bad style. Instead, you should use addEventListener to register an event handler. This would look like this:

h1tag[0].addEventListener('click', changeColor);

The same thing is true with the load event of window. Here, you are correctly using onload to register your event handler, so this will work properly. But again, you should be using addEventListener here too.

You should also generally avoid assigning to global variables like that. Assigning to variables that haven’t been declared previously is generally considered an error (and will cause a warning in many editors). The reason is that assigning to an undeclared variable will add the variable as a global to window. In your case, this is exactly what you want to do, but for good style, you should make it explicit then and reference the member on window directly: window.onload.

Using the load event is a very safe way to make sure that your code runs only when the document is completely ready. However, the load event actually runs very late, and depending on your document and what you want to do, it might be too late, making you miss the first user interaction. So usually, you would want to make your code run earlier. A very easy way to do that is to simply have your <script> in the document after the DOM elements you want to work with. A very common solution is to simply have it at the bottom of the <body> element. And then you can just run the code directly without having to delay it to some event.

In total, it could look like this:

<!DOCTYPE html>
<html>
<head>
  <title>Html by banas</title>
</head>

<body>
  <h1>Change with a click</h1>

  <script>
    function changeColor() {
      this.innerHTML = "Click Again";
      var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
      this.style.color = randomColor;
    }

    // init
    var h1tag = document.getElementsByTagName("h1");
    h1tag[0].addEventListener('click', changeColor);
  </script>

</body>
</html>

Upvotes: 2

Janne Tuukkanen
Janne Tuukkanen

Reputation: 1660

The onclick should be in lowercase:

h1tag[0].onclick = changeColor

Upvotes: 0

Rahul Gaba
Rahul Gaba

Reputation: 480

Use addEventListener instead of onClick.

Change your init function to the following:

function init() {

    var h1tag = document.getElementsByTagName("h1")
    h1tag[0].addEventListener('click', changeColor)

}


function changeColor() {
    this.innerHTML = "Click Again"

    var randomColor =  "#"+Math.floor(Math.random()*16777215).toString(16)

    this.style.color = randomColor
}


onload =  init

Upvotes: 0

wisn
wisn

Reputation: 1024

Here you go!

function init() {
  var h1tag = document.getElementsByTagName("h1")
  h1tag[0].onClick = changeColor(h1tag[0])
}


function changeColor(elm) {
  elm.innerHTML = "Click Again"

  var randomColor =  "#"+Math.floor(Math.random()*16777215).toString(16)

  elm.style.color = randomColor
}


window.onload = init()
<!DOCTYPE html>
<html>
  <head>
    <title>Html by banas</title>
  </head>
  <body>
    <h1 onclick="changeColor(this)">Change with a click</h1>
  </body>
</html>

Upvotes: 0

Related Questions