Добавить изображение на страницу по клику - PullRequest
Новая
       43

Добавить изображение на страницу по клику

2 голосов
/ 17 января 2012

Я хочу, чтобы кнопка добавляла изображение на текущую страницу при каждом клике.Например, при первом открытии страницы появляется одна картинка.Затем вы нажимаете кнопку, и на странице появляется одно и то же изображение, и теперь у вас есть два одинаковых изображения.Затем вы продолжаете нажимать на кнопку, и появляется все больше и больше одинаковых картинок.Это код, который я пробовал, который не работал: 

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

Пожалуйста, помогите!Спасибо.

Ответы [ 2 ]

5 голосов
/ 17 января 2012

Вы, вероятно, должны знать, что 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>
0 голосов
/ 17 января 2012

Все, что вам не хватает, - это метод записи элемента на странице 

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