2017-03-01 10 views
0

onkeypressイベントを使用して、すべてのdivの背景色を変更しようとしています。 R =赤、B =白、V =緑。 Rを押すと機能しますが、VまたはBを押すと警告が表示されます。 私はリターンなしで、スイッチ(実際にはこれをスイッチで行うことになっています)で試しました。教師が今日クラスをキャンセルしたので、私は彼と一緒にそれをチェックすることができませんでした。そして、私は来週まで彼を見ていません。私は事前のおかげでdiv bgcolor onkeypressを変更してください

window.onkeypress = function colorchange(x) 
    { 
     if (x.keyCode == 114) 
      { var divs = document.getElementsByTagName("div"); 
      for(var i = 0; i < divs.length; i++) 
      { 
      divs[i].style.backgroundColor = "red"; 
      }return; 
      } 
     if (x.keycode == 118) 
      { 
      var divs = document.getElementsByTagName("div"); 
      for(var i = 0; i < divs.length; i++) 
      { 
      divs[i].style.backgroundColor = "green"; 
      }return; 
      } 
     if (x.keycode == 98) 
     { 

      var divs = document.getElementsByTagName("div"); 
      for(var i = 0; i < divs.length; i++) 
      { 
      divs[i].style.backgroundColor = "white"; 
      }return; 
     } 
     else 
     { 
      alert("this key doesnt do anything") 

     } 
    } 

}

答えて

0

あなたは、第2、第3のif文でx.keycodeの代わりx.keyCodeを比較しています。条件は、else ifを使用してチェーンする必要があります。

window.onkeypress = function colorchange(x) 
{ 
    if (x.keyCode === 114) { 
    var divs = document.getElementsByTagName("div"); 
    for (var i = 0; i < divs.length; i++) 
    { 
     divs[i].style.backgroundColor = "red"; 
    } 
    return; 
    } 
    else if (x.keyCode === 118) 
    { 
    var divs = document.getElementsByTagName("div"); 
    for(var i = 0; i < divs.length; i++) 
    { 
     divs[i].style.backgroundColor = "green"; 
    } 
    return; 
    } 
    else if (x.keyCode === 98) 
    { 
    var divs = document.getElementsByTagName("div"); 
    for(var i = 0; i < divs.length; i++) 
    { 
     divs[i].style.backgroundColor = "white"; 
    } 
    return; 
    } 
    else 
    { 
    alert("this key doesnt do anything") 
    } 
} 

working jsfiddle hereを参照してください。

+0

これは痛いです。今はすべてうまくいきます..メモFirefoxではうまくいきませんが、クロムはすべていいです! –

+0

@FrankCharronあなたは 'x.which'を使うべきです。これはほとんどの場合に有効です。 'var code =(e.keyCode?e.keyCode:e.which); ' ここをクリックしてください:https://css-tricks.com/snippets/javascript/javascript-keycodes/ – edwarddamato

1

は、変数は大文字と小文字が区別されます。..助けてくださいば完全に立ち往生2-3時間とIMのためのものと他のものを試してみました。 keycodeがあり、keyCodeである必要があります。あなたもelse if()を使用しているように見えます。

window.onkeypress = function colorchange(x) { 
 
    if (x.keyCode == 114) { 
 
    var divs = document.getElementsByTagName("div"); 
 
    for (var i = 0; i < divs.length; i++) { 
 
     divs[i].style.backgroundColor = "red"; 
 
    } 
 
    return; 
 
    } else if (x.keyCode == 118) { 
 
    var divs = document.getElementsByTagName("div"); 
 
    for (var i = 0; i < divs.length; i++) { 
 
     divs[i].style.backgroundColor = "green"; 
 
    } 
 
    return; 
 
    } else if (x.keyCode == 98) { 
 
    var divs = document.getElementsByTagName("div"); 
 
    for (var i = 0; i < divs.length; i++) { 
 
     divs[i].style.backgroundColor = "white"; 
 
    } 
 
    return; 
 
    } else { 
 
    alert("this key doesnt do anything") 
 
    } 
 
}
body { 
 
background: #eee; 
 
} 
 

 
div { 
 
width: 100px; 
 
height: 100px; 
 
background: #aaa; 
 
}
<div></div>

関連する問題