更改div bgcolor onkeypress

时间:2017-03-01 01:01:42

标签: javascript html css

尝试使用onkeypress事件更改所有div的背景颜色。 R =红色,B =白色,V =绿色。当按R它有效但当我按下V或B时它会给我警报。 我尝试了没有返回,有一个开关(实际上我应该用开关来做这个)。老师今天取消了课程,所以我不能和他一起检查。我下周不会见到他。我尝试了2-3小时的东西和其他东西,我总是卡住请帮助..提前致谢

    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")

         }
    }

}

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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