如何在默认图像上显示/弹出图像？ （JavaScript的）

Question

当按下某个键盘键时，我试图让图像显示在默认图像的顶部（＆＃34; images / giphy.gif＆＃34;）。例如，按下A键时，我想要显示图像。

然而，当我在文本框上输入键时，我能够在默认图像下显示图像（＆＃34; images / giphy1.gif＆＃34;），这不是重点，因为我希望它在顶部/或覆盖默认图像

* P.S。我仍然是初学者，没有编码方面的经验。我也是在Dreamweaver 8中做到这一点

这是我的函数代码：

<img src="images/giphy.gif" width="800" height="400" alt=""/>
<input type="text" onkeypress="myFunction()">

JS：

window.addEventListener("keypress", checkKeyPressed, false);

function myFunction() {
    var x = document.createElement("IMG");

    x.setAttribute("src", "images/giphy1.gif")
    x.setAttribute("width", "705");
    x.setAttribute("width", "591");
    x.setAttribute("alt", "The Pulpit Rock");

    document.body.appendChild(x);
}

编辑：

<img src="images/giphy.gif" id="default-img" width="800" height="400" alt=""/>
<input type="text" onkeypress="myFunction()">

<script>

window.addEventListener("keypress", checkKeyPressed, false);


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);
}
</script>

Answer 1

您可以使用以下方法将新img插入身体顶部：

document.body.insertBefore(x,document.body.firstElementChild);

希望这会有所帮助。

function myFunction() {
    var x = document.createElement("IMG");

    x.setAttribute("src", "https://www.stib-mivb.be/irj/go/km/docs/horaires/2/images/20150629/2.gif")
    x.setAttribute("width", "30");
    x.setAttribute("width", "30");
    x.setAttribute("alt", "The Pulpit Rock");

    document.body.insertBefore(x,document.body.firstElementChild);
}

<br>
<img src="https://www.stib-mivb.be/irj/go/km/docs/horaires/1/images/20150629/1.gif" alt=""/>
<br>
<input type="text" onkeypress="myFunction()">

不使用输入进行编辑：

<br>
<img src="https://www.stib-mivb.be/irj/go/km/docs/horaires/1/images/20150629/1.gif" 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", "https://www.stib-mivb.be/irj/go/km/docs/horaires/2/images/20150629/2.gif")
    x.setAttribute("width", "30");
    x.setAttribute("width", "30");
    x.setAttribute("alt", "The Pulpit Rock");

    document.body.insertBefore(x,document.body.firstElementChild);
  }
</script>

Answer 2

只添加一个eventlistener

<input type="text" onkeypress="myFunction()">

和

不需要window.addEventListener("keypress", checkKeyPressed, false);

Answer 3

appendChild始终将内容添加到最后。 VanillaJS中没有prepend方法。所以你应该使用insertBefore方法。例如，像这样：

document.body.insertBefore(x, document.body.firstChild);

但在现实生活中，你必须包装你的默认图像并将其插入容器中。