Как добавить событие .click () к изображению? - PullRequest
Новая
       35

Как добавить событие .click () к изображению?

15 голосов
/ 11 сентября 2011

У меня есть скрипт, который помещает изображение на основе щелчка мыши благодаря Хосе Фаэти .Теперь мне нужна помощь в добавлении события .click () в приведенный ниже код, чтобы, когда пользователь щелкает изображение, он выполнял функцию, показанную в сценарии. 

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

Я поместил весь код ниже, на случай, еслиВы хотите это увидеть. 

<html>
<head>
 <script language="javascript" type="text/javascript">
 <!--

 document.getElementById('foo').addEventListener('click', function (e) {

var img = document.createElement('img');

img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');

e.target.appendChild(img);
});

  // -->
 </script>

</head>

<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>

Помощь?

Ответы [ 3 ]

27 голосов
/ 11 сентября 2011

Прежде всего, эта строка 

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

Вы смешиваете HTML и JavaScript.Это не работает так.Избавьтесь от .click() там.

Если вы читаете полученный там JavaScript, document.getElementById('foo') ищет элемент HTML с идентификатором foo.У тебя его нет.Присвойте своему изображению ID: 

<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />

В качестве альтернативы, вы можете добавить JS в функцию и добавить щелчок мышью в ваш HTML: 

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />

Я предлагаю вам немного почитатьХотя JavaScript и HTML.

Остальные правы, что им тоже нужно переместить <img> над привязкой клика JS.

10 голосов
/ 11 сентября 2011

Вы не можете привязать событие к элементу, пока оно не существует, поэтому вы должны сделать это в событии onload: 

<html>
<head>
<script type="text/javascript">

window.onload = function() {

  document.getElementById('foo').addEventListener('click', function (e) {
    var img = document.createElement('img');
    img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
    e.target.appendChild(img);
  });

};

</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
1 голос
/ 15 февраля 2014 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
 var img = document.createElement('img');
 img.setAttribute('src', 'tiger.jpg');
  img.setAttribute('width', '200');
   img.setAttribute('height', '150');
  document.getElementById("images").appendChild(img);


}


</script>
</head>
<body>

<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>

<div id="images" >
</div>

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />

</body>
</html>
...