Хотел бы, чтоб посмотрели и сказали что правильно, а что нет (я новичок).
Нужно было перебрать массив с элементами и при событии нажатия клавиши открывать один из них и скрывать все остальные.
Вот что получилось:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>скрипт</title>
<script>
function openElement(id) {
var idE = document.getElementById(id);
var clE = document.getElementsByClassName("options");
var elem, activeElement;
for(var i = 0, len = clE.length; i < len; i += 1) {
elem = clE[i].style.display;
activeElement = clE[i];
if ( elem == "block" ) break;
}
if ( elem == "block" ) {
if ( idE.style.display == "block" ) {
idE.style.display = "none";
}
else {
activeElement.style.display = "none";
idE.style.display = "block";
}
}
else {
idE.style.display = "block";
}
}
function keyControl(event) {
if (event.keyCode == 81) openElement("d1"); // Функция при нажатии q
if (event.keyCode == 87) openElement("d2"); // Функция при нажатии w
if (event.keyCode == 69) openElement("d3"); // Функция при нажатии e
if (event.keyCode == 82) openElement("d4"); // Функция при нажатии r
}
window.addEventListener("keydown", keyControl, false);
</script>
</head>
<body>
<div class="options" id="d1" style="display:none; width:50px; height:50px; position:absolute; left:0px; background:red;"></div>
<div class="options" id="d2" style="display:none; width:50px; height:50px; position:absolute; left:50px; background:green;"></div>
<div class="options" id="d3" style="display:none; width:50px; height:50px; position:absolute; left:100px; background:blue;"></div>
<div class="options" id="d4" style="display:none; width:50px; height:50px; position:absolute; left:150px; background:black;"></div>
<span style="position:absolute; top:60px;">Нажми Q, W, E или R</span>
</body>
</html>