ボタンがクリックされていなくても、h1タグは黄色です

-1

ボタンをクリックする前であっても、h1タグ付き要素は黄色く表示されます。ボタンをクリックすると黄色にしたいだけです。あなたのjsスニペットでボタンがクリックされていなくても、h1タグは黄色です

<html> 

<head> 
<title></title> 
</head> 
<body> 

<h1>Hello </h1> 

<h2>World</h2> 

<h1>test</h1> 


<button id="button">click</button> 
<script> 
    var x = document.getElementById("button"); 

    x.addEventListener("onclick",change()); 

    function change(){ 
     var myNodes = document.getElementsByTagName("h1"); 

     for (var i = 0; i < myNodes.length ; i++) { 
      myNodes[i].style.backgroundColor = "yellow"; 
     } 
    } 

</script> 

</body> 
</html>

出典

2017-12-16 cburalk

2つの問題は、最初x.addEventListener("onclick",change());

でイベントがclickの代わりに、onclickの、第二change()意志でなければなりませんすぐに関数を呼び出すが、x.addEventListener("click",change)は、クリックされたときにのみ関数をトリガーする。

var x = document.getElementById("button"); 
 

 
x.addEventListener("click", change); 
 

 
function change() { 
 
    var myNodes = document.getElementsByTagName("h1"); 
 

 
    for (var i = 0; i < myNodes.length; i++) { 
 
    myNodes[i].style.backgroundColor = "yellow"; 
 
    } 
 
}

<h1>Hello </h1> 
 

 
<h2>World</h2> 
 

 
<h1>test</h1> 
 

 

 
<button id="button">click</button>

出典

2017-12-16 18:16:33 brk

ありがとう、それは働いた。どのようにしてそのような詳細を知ることができますか？私が読んで練習できるページはありますか？ – cburalk

それはaddEventListner機能は、機能の変更が（変更しないで受け入れるためです）

<script> 
     var x = document.getElementById("button"); 

     x.addEventListener("click",change); 

     function change(){ 
      var myNodes = document.getElementsByTagName("h1"); 
      for (var i = 0; i < myNodes.length ; i++) { 
       myNodes[i].style.backgroundColor = "yellow"; 
      } 
     } 

    </script>

出典

2017-12-16 18:13:39 zabusa

コードだけ答えが変更された何の説明もなしに非常に有用ではないとpageloadにそのためではなくaddeventlistner火災@charlietflより良い仕事をして – charlietfl

場合は特に – Li357

リンクの重複がありますなぜ – zabusa

ボタンがクリックされていなくても、h1タグは黄色です

答えて

関連する問題