このプロジェクトでaddEventListenerが動作しないのはなぜですか？

Question

document.getElementById('btn').addEventListener("onclick", mouseover); 
 

 
function mouseover() { 
 
    this.style.color = " yellow "; 
 
    this.style.backgroundcolor = "green"; 
 
}

<input type="button" value= "Submit" id="btn" />

Answer 1

クリックという名前のイベントにリスナーをアタッチするには、次のいずれかを実行する必要があります。

object.onclick = function(event) { ... } 
object.addEventListener('click', function(event) { ... }); 

何のイベントの前に「上」はありません2番目のアプローチの名前はですので、あなたのコードは次のようになります：

var btn = document.getElementById('btn'); 
 
btn.addEventListener("click", mouseover); 
 
        // ^-- note no "on" here 
 

 
function mouseover() { 
 
    this.style.color = "yellow"; 
 
    this.style.backgroundColor = "green"; 
 
}

<input type="button" value= "Submit" id="btn" />

（またはないbackground.color、それはbackgroundColorだことに注意して、カラーの文字列の中にはスペースがあってはなりません。）

Answer 2

あなたはいくつかの問題を持って、コメントが間違っていたかを説明。

//define the function first (best practice) 
 
function mouseovera() { 
 
    this.style.color = "yellow"; //remove the spaces 
 
    this.style.backgroundColor = "green"; //It is camel case not dot 
 
} 
 

 
var btn = document.getElementById("a"); 
 
btn.addEventListener("click", mouseovera); //it is click, not onclick

<button id="a" type="button">a</button>

今これを行うには良い方法は、クラスとなります。 classListを使用すると、ボタンをクリックしたときにクラスを簡単に切り替えたり、クラスを追加したりすることができます。また、クラスを使用すると、JavaScriptコードの外でスタイルを維持することは簡単です。

function makeActive() { 
 
    this.classList.toggle("active") 
 
} 
 

 
var btn = document.getElementById("a"); 
 
btn.addEventListener("click", makeActive);

button { 
 
    background-color: #CCC; 
 
} 
 

 
.active { 
 
    color: yellow; 
 
    background-color: green; 
 
}

<button id="a" type="button">a</button>

Answer 3

だけclick代わりonclickのを使用してみてください。

btn.addEventListener("click", mouseover); 

function mouseover() { 
    this.style.color = " yellow "; 
    this.style.backgroundColor = "green";   
} 

また上記のコメントは、JavaScriptから基準背景色に `background.color`は` .backgroundColor`なければならないstyle.backgroundColor