Question

我尝试使用多种方法来执行此操作，但onclick函数没有响应。我用铬。你能否回答非常清楚，因为我是初学者。

＆＃13;

<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>

＆＃13;

其他部分可以工作但不是onclick部分。你能帮忙吗？它没有显示chrome中的任何错误。上面的代码段实际上是我的所有代码，我希望被告知这是什么错误以及如何解决它。

Answer 1

对多元素点击Array.prototype.forEach.call()

执行相同的上述逻辑

更好的方法是使用切换类而不是检查颜色名称

＆＃13;

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')
})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

onclick（）函数不运行代码

1 个答案: