时间戳

首页 > 解决方案 > 如何让事件监听器将图像添加到我的页面？

javascript - 如何让事件监听器将图像添加到我的页面？

问题描述

我有一个按钮。当我单击按钮时，我想要创建一个猫的图像。我已经创建了一个函数来做到这一点。我已向按钮添加了一个事件侦听器，该事件侦听器在单击按钮时触发该功能。但是没有创建这样的图像。这是代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button id="1">hello</button>
 <script>
function create(){
    var image= document.createElement("img")
    image.src="https://encrypted-tbn0.gstatic.com/images? 
    q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU"
    document.body.appendChild(image)
   }
   var element=document.getElementById("1")
   element.addEventListener("click", create)
  </script>
</body>
</html>

标签： javascripthtmladdeventlistener

解决方案

images?那是因为 url 被破坏了，并且在下一行之间引入了空白。使用+或复制 url 连接它们，在浏览器中尝试，然后从浏览器复制相同的 url 并将其放在引号之间

function create() {
  var image = document.createElement("img")
  image.src="https://encrypted-tbn0.gstatic.com/images?"+ 
"q=tbn%3AANd9GcQeP6zBFWjK10gNYUK1kxM6I-AbF8vK_zPGSHrk38JzCb_5ZpRd&usqp=CAU";
  document.body.appendChild(image)
}
var element = document.getElementById("1")
element.addEventListener("click", create)
<button id="1">hello</button>

推荐阅读