使用键盘 (JS) 更改页面上的内容（处理图像）

Question

所以我在搞 JS，我做了一些东西，当我按下一个键时它会显示那个字母。所以如果我在键盘上按 A ，KeyA 会出现在页面上，但我想知道是否可以在我按 A 时显示图像 代替。提前致谢 <3 （我也有在代码片段中）

const log = document.getElementById('log');

document.addEventListener('keypress', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

  function logKey(a) {
  log.textContent += ` ${a.code}`;
}

  function logKey(a) {
  log.textContent += ` ${a.code}`;
}

  function logKey(q) {
  log.textContent += ` ${q.code}`;
}

  function logKey(w) {
  log.textContent += ` ${w.code}`;
}

  function logKey(r) {
  log.textContent += ` ${r.code}`;
}

  function logKey(t) {
  log.textContent += ` ${t.code}`;
}

  function logKey(y) {
  log.textContent += ` ${y.code}`;
}
  function logKey(u) {
  log.textContent += ` ${u.code}`;
}
  function logKey(i) {
  log.textContent += ` ${i.code}`;
}
  function logKey(o) {
  log.textContent += ` ${o.code}`;
}
  function logKey(p) {
  log.textContent += ` ${p.code}`;
}
  function logKey(s) {
  log.textContent += ` ${s.code}`;
}
  function logKey(d) {
  log.textContent += ` ${d.code}`;
}
  function logKey(f) {
  log.textContent += ` ${f.code}`;
}
  function logKey(g) {
  log.textContent += ` ${g.code}`;
}

  function logKey(h) {
  log.textContent += ` ${h.code}`;
}
  function logKey(j) {
  log.textContent += ` ${j.code}`;
}

  function logKey(k) {
  log.textContent += ` ${k.code}`;
}
  function logKey(l) {
  log.textContent += ` ${l.code}`;
}
  function logKey(z) {
  log.textContent += ` ${z.code}`;
}
  function logKey(x) {
  log.textContent += ` ${x.code}`;
}
  function logKey(c) {
  log.textContent += ` ${c.code}`;
}
  function logKey(v) {
  log.textContent += ` ${v.code}`;
}
  function logKey(b) {
  log.textContent += ` ${b.code}`;
}
  function logKey(n) {
  log.textContent += ` ${n.code}`;
}
  function logKey(m) {
  log.textContent += ` ${m.code}`;
}

<p id="log"></p>

Answer 1

只需使用 div 而不是

并将动态生成的图像附加到它。也不要在每次无意义时都重新声明您的功能。请改用 switch/case 并检查键码：

let div = document.getElementById("img");
window.onkeypress = function(e) {
  switch(e.code) {
    //I just did the letter A but you get the idea
    case "KeyA":
      let img = document.createElement("img");
      img.src = "https://etc.usf.edu/presentations/extras/letters/fridge_magnets/red/11/A-300.png"
      img.style = "width:70px;height:100px;"
      div.appendChild(img)
      break;
  }
}

<div id="img"></div>

使用键盘 (JS) 更改页面上的内容（处理图像）

Change whats on a page with keyboard (JS) (work with images)

javascript

keyboard

text

image