как закодировать несколько ключей на keydown? (javascript)

Question

Я пытаюсь иметь каждую клавишу, соответствующую различным изображениям при нажатии. (Пример: Когда нажата кнопка «A» = появляется изображение1, Когда нажата «S» = появляется изображение2 и т. Д.)

Мне удалось получить ключ «S» для работы, но не A. Я пытаюсь сделать это для всей строки на клавиатуре («A», «S», «D», «F», «G», «H», «J», «K», «L»,)

* PS. Im все еще новичок :)

Это мой код:

<img src="images/giphy.gif" width="800" height="400" alt=""/> 

<script> 
    document.addEventListener("keydown", keyDownBody, false); 

    function keyDownBody(e) { 
    var keyCode = e.keyCode; 
    if(keyCode==65) { 
     myFunction(); 
    } 
    } 

function myFunction() { 
var x = document.createElement("IMG"); 
x.setAttribute("src", "images/giphy1.gif") 
x.setAttribute("width", "800"); 
x.setAttribute("height", "400"); 
x.setAttribute("alt", "The Pulpit Rock"); 
document.body.appendChild(x); 
} 

function keyDownBody(e) { 
    var keyCode = e.keyCode; 
    if(keyCode==83) { 
     myFunction(); 
    } 
    } 

function myFunction() { 
var x = document.createElement("IMG"); 
x.setAttribute("src", "images/sun.gif") 
x.setAttribute("width", "800"); 
x.setAttribute("height", "400"); 
x.setAttribute("alt", "The Pulpit Rock"); 
document.body.appendChild(x); 
} 
</script> 

Answer 1

Вы заявили одну и ту же функцию несколько раз. Вы можете объединить их, чтобы они работали, а также сделать ваш код более удобочитаемым. Пример:

document.addEventListener("keydown", keyDownBody, false); 

function keyDownBody(e) { 
    var keyCode = e.keyCode; 
    switch (keyCode) { 
    case 65: 
     loadImage("images/giphy1.gif", "The Pulpit Rock"); 
     break; 
    case 83: 
     loadImage("images/sun.gif", "The Pulpit Rock"); 
     break; 

    // Etc. 
    } 
} 

function loadImage(uri, alt) { 
    var x = document.createElement("IMG"); 
    x.setAttribute("src", uri) 
    x.setAttribute("width", "800"); 
    x.setAttribute("height", "400"); 
    x.setAttribute("alt", alt); 
    document.body.appendChild(x); 
} 

Таким образом, вы можете добавить столько ключей, сколько пожелаете.

В качестве альтернативы, вы можете загрузить изображения динамически, если поместить их в массив:

var images = [{ 
     uri: 'images/giphy1.gif', 
     alt: 'A', 
    }, { 
     uri: 'images/sun.gif', 
     alt: 'Some text', 
    }, 
    // Etc. 
]; 

function keyDownBody(e) { 
    var keyCode = e.keyCode; 

    var index = keyCode - 65; 
    if (typeof images[index] !== 'undefined') 
    { 
    var image = images[index]; 
    loadImage(image.uri, image.alt); 
    } 
} 

Answer 2

Вам просто нужно добавить условия

function keyDownBody(e) { 
    var keyCode = e.keyCode; 
    if(keyCode==83) { 
     myFunction("images/giphy1.gif"); 
    } 

    if(keyCode==85) { 
     myFunction("images/giphy2.gif"); 
    } 

    if(keyCode==87) { 
     myFunction("images/giphy3.gif"); 
    } 
    } 

function myFunction(imageName) { 
    var x = document.createElement("IMG"); 
    x.setAttribute("src", imageName) 
    x.setAttribute("width", "800"); 
    x.setAttribute("height", "400"); 
    x.setAttribute("alt", "The Pulpit Rock"); 
    document.body.appendChild(x); 
} 

Answer 3

Использование же keydownEventListener для всех ключей, как

document.addEventListener("keydown", keyDownBody, false); 

    function keyDownBody(e) { 
    var keyCode = e.keyCode; 
    if(keyCode==65) { 
     myFunction("images/giphy1.gif"); 
    } 
    else if(keyCode==83) { 
     myFunction("images/sun.gif"); 
    } 
    } 

function myFunction(t) { 
var x = document.createElement("IMG"); 
x.setAttribute("src", t) 
x.setAttribute("width", "800"); 
x.setAttribute("height", "400"); 
x.setAttribute("alt", "The Pulpit Rock"); 
document.body.appendChild(x); 
} 

Answer 4

var keys_to_div = []; 
 
keys_to_div[65] = "1"; // A key 
 
keys_to_div[66] = "2"; // B key 
 

 
window.onkeydown = function(e) { 
 
    if (keys_to_div[e.keyCode]) 
 
\t document.getElementById(keys_to_div[e.keyCode]).style.display = "block"; 
 
} 
 

 
window.onkeyup = function(e) { 
 
    if (keys_to_div[e.keyCode]) 
 
\t document.getElementById(keys_to_div[e.keyCode]).style.display = "none"; 
 
}

img { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: none; 
 
}

<img src="http://images4.fanpop.com/image/photos/22100000/The-letter-A-the-alphabet-22186936-2560-2560.jpg" id="1"> 
 
<img src="http://www.drodd.com/images15/letter-b23.gif" id="2">