onclick() Function Does Not Run Code

Question

I have tried to use several methods to do this, but the onclick function is not responding. I use chrome. Can you please respond very clearly because I am a beginner.

<html>
  <head>
    <style>
      .a{
        display:inline;
        background-color: blue;
        color: blue;
        width: 100px;
        float: left;
      }
      .b{

        display:inline;
        background-color: red;
        color: red;
        width: 100px;
        float: left;
      }

      h1:hover{
        background-color: white!important;
        color: white!important;
      }
      .a::selection{
        display:inline;
        background-color: blue;
        color: blue;
        width: 100px;
        float: left;
      }
      .b::selection{
        display:inline;
        background-color: red;
        color: red;
        width: 100px;
        float: left;
      }
    </style>

  </head>
  <body>
    <div id="div" class="div">
    </div>
    <script>
      for(var i = 1;i<10;i){
        var a = document.createElement('h1')
        document.getElementById('div').appendChild(a)
        a.innerHTML=("HI")
        a.id="id"
        document.getElementById("id").setAttribute('class', 'a');
        a.id=null
        a.href=""
        i=i+1


        var b = document.createElement('h1')
        document.getElementById('div').appendChild(b)
        b.innerHTML=("BYE")
        b.id="id"
        document.getElementById("id").setAttribute('class', 'b');
        b.id=null
        b.href=""
        i=i+1
        }

        for(i=1;i<10000;i){
          setTimeout(function(){
            document.getElementsByClassName('a')[0].setAttribute("style","background-color:red;color:red")
            Array.prototype.forEach.call(document.getElementsByClassName('a'),
                             item => item.setAttribute("style","color: blue;background-color:blue"));
          },(2*i-0)*1000)
          setTimeout(function(){
            document.getElementsByClassName('a')[0].setAttribute("style","background-color:blue;color:blue")
            Array.prototype.forEach.call(document.getElementsByClassName('a'),
                             item => item.setAttribute("style","color: red;background-color:red"));
          },(2*i-1)*1000)
          setTimeout(function(){
            document.getElementsByClassName('b')[0].setAttribute("style","background-color:blue;color:blue")
            Array.prototype.forEach.call(document.getElementsByClassName('b'),
                             item => item.setAttribute("style","color: blue;background-color:blue"));
          },(2*i-1)*1000)
          setTimeout(function(){
            document.getElementsByClassName('b')[0].setAttribute("style","background-color:red;color:red")
            Array.prototype.forEach.call(document.getElementsByClassName('b'),
                             item => item.setAttribute("style","color: red;background-color:red"));
          },(2*i-0)*1000)
          i=i+1
        }
        var color = document.querySelectorAll('h1')
        color.onclick = function(){
          alert('debug')
          if (this.style.backgroundColor == 'white') {
            this.style.backgroundColor = '#000001'
            this.style.color = '#000001'
          }
          
          if (this.style.backgroundColor == '#000001') {
            this.style.backgroundColor = 'white'
            this.style.color = 'white'
          }

        }
    </script>

  </body>
</html>

The other parts work but not the onclick part. Can you please help? It does not show any error in chrome. The snippet above is actually all my code, and I wish to be informed of what error this is and how to solve it.

Give unique ids to your elements. – gurvinder372 Oct 30 '17 at 10:35 — gurvinder372, Oct 30 '17 at 10:35

prasanth · Accepted Answer · 2017-10-30T10:55:53.327

Do the same above logic for multiple element click Array.prototype.forEach.call()

For more better simply do with toggle class instead of checking colours name

for (var i = 1; i < 10; i) {
  var a = document.createElement('h1')
  document.getElementById('div').appendChild(a)
  a.innerHTML = ("HI")
  a.id = "id"
  document.getElementById("id").setAttribute('class', 'a');
  a.id = null
  a.href = ""
  i = i + 1
  var b = document.createElement('h1')
  document.getElementById('div').appendChild(b)
  b.innerHTML = ("BYE")
  b.id = "id"
  document.getElementById("id").setAttribute('class', 'b');
  b.id = null
  b.href = ""
  i = i + 1
}

for (i = 1; i < 10000; i) {
  setTimeout(function() {
    document.getElementsByClassName('a')[0].setAttribute("style", "background-color:red;color:red")
    Array.prototype.forEach.call(document.getElementsByClassName('a'),
      item => item.setAttribute("style", "color: blue;background-color:blue"));
  }, (2 * i - 0) * 1000)
  setTimeout(function() {
    document.getElementsByClassName('a')[0].setAttribute("style", "background-color:blue;color:blue")
    Array.prototype.forEach.call(document.getElementsByClassName('a'),
      item => item.setAttribute("style", "color: red;background-color:red"));
  }, (2 * i - 1) * 1000)
  setTimeout(function() {
    document.getElementsByClassName('b')[0].setAttribute("style", "background-color:blue;color:blue")
    Array.prototype.forEach.call(document.getElementsByClassName('b'),
      item => item.setAttribute("style", "color: blue;background-color:blue"));
  }, (2 * i - 1) * 1000)
  setTimeout(function() {
    document.getElementsByClassName('b')[0].setAttribute("style", "background-color:red;color:red")
    Array.prototype.forEach.call(document.getElementsByClassName('b'),
      item => item.setAttribute("style", "color: red;background-color:red"));
  }, (2 * i - 0) * 1000)
  i = i + 1
}
var color = document.querySelectorAll('h1')
 Array.prototype.forEach.call(color,item=>
item.onclick = function() {

  console.log(this.style.backgroundColor )
  this.classList.toggle('white')
})

.a {
  display: inline;
  background-color: blue;
  color: blue;
  width: 100px;
  float: left;
}

.b {
  display: inline;
  background-color: red;
  color: red;
  width: 100px;
  float: left;
}

h1.white,h1:hover{
background-color: white !important;
  color: white !important;
}
.a::selection {
  display: inline;
  background-color: blue;
  color: blue;
  width: 100px;
  float: left;
}

.b::selection {
  display: inline;
  background-color: red;
  color: red;
  width: 100px;
  float: left;
}

<div id="div" class="div">
</div>

This is a relatively good answer but the color does not alternate as wanted. — John Hao, Oct 30 '17 at 10:45
yes colours are only red and blue,but you are matching with white color — prasanth, Oct 30 '17 at 10:50

onclick() Function Does Not Run Code

1 Answers1