將圖像添加到頁面onclick

我想要一個按鈕在每次單擊時將圖像添加到當前頁面。例如，第一次打開頁面時，有一張圖片。然後你點擊該按鈕，頁面上出現相同的圖片，現在你有兩個相同的圖片。然後你繼續按下按鈕，出現越來越多的相同圖片。這是我試過的代碼不起作用：將圖像添加到頁面onclick

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

請幫忙！謝謝。

來源

2012-01-16 PrplNinja

你或許應該知道，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>

來源

2012-01-16 21:14:32 tjarratt

謝謝！但如何添加圖像類？我試過img.class，但沒有奏效。 – PrplNinja 2012-01-16 21:39:44

我編輯了我的答案，以顯示如何爲元素設置CSS類。希望這可以幫助！ – tjarratt 2012-01-16 22:14:56

由於某種原因，我添加類的東西后，按鈕不起作用。我應該替換「class」還是「foo」？我使用的類是box2d，如果有幫助的話。 – PrplNinja 2012-01-16 22:18:53

-3

所有你缺少的是寫的元素的頁面

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

來源

2012-01-16 21:09:26

這實際上會使整個文檔成爲單個圖像。你想追加到文檔的正文，所以你可以繼續添加圖像，而不是替換已經存在的按鈕。 – tjarratt 2012-01-16 21:15:07

將圖像添加到頁面onclick

回答

相關問題