2017-03-01 65 views
0

嘗試使用onkeypress事件更改所有div的背景顏色。 R =紅色,B =白色,V =綠色。當按R時,它可以工作,但是當我按下V或B時,它會給我警報。 我試過沒有回報,與開關(實際上我應該用開關做到這一點)。老師今天取消了課,所以我不能和他一起去看看。下週我不會見他。我試過的東西,其他的事情2-3小時,IM完全以卡請幫助..在此先感謝更改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

您比較x.keycode,而不是x.keyCode在第二和第三if語句。您還應該使用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

ahah ouch這個傷了!現在一切都很好..注意它不適用於Firefox,但鉻是一切都好! –

+0

@FrankCharron你應該使用'x.which',它適用於大多數情況。 var code =(e.keyCode?e.keyCode:e.which);' 請參閱:https://css-tricks.com/snippets/javascript/javascript-keycodes/ – edwarddamato

1

的變量是區分大小寫的。你有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>