関数は1回実行され、addEventListenerは無効です

Question

​​,keypressおよびkeyupイベントに応じて、3つの表のセルの背景色を操作しています。
HTML

<table border="1px"> 
    <tr><th>Event</th><th>Action</th><th>Value</th></tr> 
    <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr> 
    <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr> 
    <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr> 
</table> 
<input type="text" id="txt" /><br /> 

JS

window.onload = function() 
{ 
document.getElementById("txt").addEventListener("Keydown", keyisdown(), false); 
document.getElementById("txt").addEventListener("Keyup", keyisup(), false); 
document.getElementById("txt").addEventListener("Keypress", keyispress(), false); 
} 

function keyisdown() 
{ 
document.getElementById("press").style.backgroundColor = "white"; 
document.getElementById("up").style.backgroundColor = "white"; 
document.getElementById("down").style.backgroundColor = "red"; 
} 
// above function is repeated twice for keyisup and keyispress 

私はフィールドに入力し、それぞれの背景色を変更するが、すべて二度とページのロード時に一度実行したり、リフレッシュしてすることになっています、どうすればそれを解決できますか？ありがとう。ここで

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

あなたはこれがサポートされていない一部の古いブラウザでは、addEventListener

を使用するために知っておく必要があるすべてを持っている。このうち

Answer 1

チェック。あなたがにaddEventListenerに似た何かを行うことができます

：

var element = document.getElementById("element"); 
element.onclick = function() { 
    // 
} 

Answer 2

window.onload = function() 
 
{ 
 
document.getElementById("txt").addEventListener("keydown", keyisdown, false); 
 
document.getElementById("txt").addEventListener("keyup", keyisup, false); 
 
document.getElementById("txt").addEventListener("keypress", keyispress, false); 
 
} 
 

 
function keyisdown() 
 
{ 
 
document.getElementById("press").style.backgroundColor = "white"; 
 
document.getElementById("up").style.backgroundColor = "white"; 
 
document.getElementById("down").style.backgroundColor = "red"; 
 
} 
 
function keyisup() 
 
{ 
 
document.getElementById("press").style.backgroundColor = "white"; 
 
document.getElementById("up").style.backgroundColor = "red"; 
 
document.getElementById("down").style.backgroundColor = "white"; 
 
} 
 

 
function keyispress() 
 
{ 
 
document.getElementById("press").style.backgroundColor = "red"; 
 
document.getElementById("up").style.backgroundColor = "white"; 
 
document.getElementById("down").style.backgroundColor = "white"; 
 
}

<table border="1px"> 
 
    <tr><th>Event</th><th>Action</th><th>Value</th></tr> 
 
    <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr> 
 
    <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr> 
 
    <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr> 
 
</table> 
 
<input type="text" id="txt" /><br />

Answer 3

最初のエラーは、あなたがwindow.load上で機能を実行していることです。関数の名前だけをeventListenerに渡し、関数名の後に()を削除します。

2番目：イベントリスナーを接続する代わりに.onkeydownを使用します。

第3回：arrowkeyupとarrowkeydownを押すと、セルの色を変更しようとしないことを願っています。 onkeydownおよびonkeyupは、どのキーが押されたかを登録しません。そのためには.keyCodeを使用する必要があります。

以下の例では、矢印キーを押すと緑に変わり、矢印キーを押すと赤に変わる機能が含まれています。

window.onload = function() 
 
{ 
 

 
document.getElementById("txt").onkeydown = function(e){ 
 
    document.getElementById("press").style.backgroundColor = "white"; 
 
    document.getElementById("up").style.backgroundColor = "white"; 
 
    var code = e.keyCode; 
 
    if(code==40){ 
 
    document.getElementById("down").style.backgroundColor = "red"; 
 
    } 
 
    else if(code==38){ 
 
    document.getElementById("down").style.backgroundColor = "green"; 
 
    } 
 
} 
 

 
}

<table border="1px"> 
 
    <tr><th>Event</th><th>Action</th><th>Value</th></tr> 
 
    <tr><td>Keydown</td><td id="down"></td><td id="downvalue"></td></tr> 
 
    <tr><td>Keypress</td><td id="press"></td><td id="pressvalue"></td></tr> 
 
    <tr><td>Keyup</td><td id="up"></td><td id="upvalue"></td></tr> 
 
</table> 
 
<input type="text" id="txt"/><br />

Answer 4

基本的に私は別のIDEを使用して、物事がうまく働いた、それを解決！私が使用していたのはバグだったようです。 [下のユーザKittyCatが述べたように、()を削除する必要がありました。]