2017-10-30 5 views
1

これを行うにはいくつかの方法を使用しようとしましたが、onclick関数は応答していません。私はクロムを使う。私は初心者ですから、あなたは非常にはっきりと答えることができますか?onclick()関数はコードを実行しません

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

他の部分はonclickの一部を動作しますが、ありません。あなたは助けてもらえますか?クロムには何のエラーも見られません。上のスニペットは実際にはすべて私のコードです。このエラーがどのようなものか、解決する方法を知りたいと思っています。

+0

に名前を付けますあなたの要素に。 – gurvinder372

答えて

0

複数の要素に同じ上記のロジックを実行し、より良くするためにArray.prototype.forEach.call()

をクリックするだけ代わりに色をチェックするトグルクラスで行うには、固有のIDを付け

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>

+0

これは比較的良い答えですが、色は必要に応じて交互に変わりません。 –

+0

はい色は赤と青だけですが、白色と一致しています – prasanth

+0

更新された回答を確認してください – prasanth

関連する問題