Image 将图像添加到页面onclick_Image_Button_Onclick

Image 将图像添加到页面onclick

image button

Image 将图像添加到页面onclick,image,button,onclick,Image,Button,Onclick,我想要一个按钮，在每次点击时将图像添加到当前页面。例如，第一次打开页面时，有一张图片。然后单击按钮，页面上会出现相同的图片，现在您有了两张相同的图片。然后你继续按按钮，就会出现越来越多的相同图片。这是我尝试过但不起作用的代码： <script type="text/javascript"> function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50"

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

<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>


函数addimage（）{}
点击

请帮忙！谢谢。

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

  <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>


函数addimage（）{
文件。写入（“”）
}
点击

您可能知道javascript可以创建html元素，但不能直接将html嵌入javascript中（它们是两个完全不同的东西，语法和关键字不同）。因此，使用只包含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>


函数addimage（）{
var img=document.createElement（“img”）；
img.src=”http://bricksplayground.webs.com/brick.PNG"; 
img.高度=50；
img.width=100；
//可以选择在图像上设置css类
var class_name=“foo”；
img.setAttribute（“类”，类名称）；
文件.正文.附件（img）；
}
点击

这实际上会使整个文档成为一个图像。您希望附加到文档正文，以便继续添加图像，而不是替换已有的按钮。谢谢！但是如何添加图像类呢？我尝试了img.class，但没有成功。我编辑了我的答案来展示如何为元素设置css类。希望这有帮助！由于某种原因，在我添加了类内容之后，按钮不起作用。我应该用“class”或“foo”来代替这个词吗？如果有帮助的话，我使用的类是box2d。在上面的示例代码中，我在添加的图像上设置了一个名为“foo”的类。我会把它编辑得更清楚一点。setAttribute方法有两个属性——atribute的名称，然后是值。哎呀，我在setAttribute调用中引用了错误的变量。当我的变量名为“img”时，我的代码是“image.setAttribute”。对不起，如果这让你感到困惑的话。