Question

我想要一个按钮，在每次点击时将图像添加到当前页面。例如，第一次打开页面时，有一张图片。然后单击按钮，页面上会出现相同的图片，现在您有两张相同的图片。然后你继续按下按钮，会出现越来越多相同的图片。这是我试过的代码不起作用的代码：

<script type="text/javascript">
        function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
    </script>
</head>
<body>
    <button onclick="addimage();">Click</button>
</body>
</html>

请帮忙！感谢。

Answer 1

你应该知道javascript可以创建html元素，但你不能直接在javascript中嵌入html（它们是两个完全独立的东西，有不同的语法和关键字）。因此，拥有仅包含html的函数是无效的 - 您需要创建所需的元素，然后将它们附加到您希望它们的dom元素。在这种情况下，您创建一个新图像，然后将其附加到正文。

<html>
<body>
<script type="text/javascript">
        function addimage() { 
          var img = document.createElement("img");
          img.src = "http://bricksplayground.webs.com/brick.PNG"; 
          img.height = 50; 
          img.width = 100;

          //optionally set a css class on the image
          var class_name = "foo";
          img.setAttribute("class", class_name);

          document.body.appendChild(img);
        }
</script>
</head>
<body>
    <button onclick="addimage();">Click</button>
</body>
</html>

Answer 2

您所缺少的是在页面上编写元素的方法

  <script type="text/javascript">
    function addimage() {
      document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
    }
  </script>
</head>
<body>
  <button onclick="addimage();">Click</button>
</body>

将图像添加到页面onclick

2 个答案: