it-swarm.it

Come faccio ad aggiungere un evento .click () a un'immagine?

Ho uno script che posiziona un'immagine basata su un clic del mouse grazie a Jose Faeti . Ora ho bisogno di aiuto per aggiungere un evento .click () al codice seguente in modo che quando un utente fa clic sull'immagine svolge la funzione mostrata nello script.

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

Ho messo l'intero codice qui sotto, nel caso tu voglia vederlo.

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

Aiuto?

15
SS'

Prima di tutto, questa linea

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

Stai mescolando HTML e JavaScript. Non funziona così. Sbarazzarsi di .click() lì.

Se leggi il JavaScript che hai lì, document.getElementById('foo') sta cercando un elemento HTML con un ID di foo. Non ne hai uno. Dai alla tua immagine quell'ID:

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

In alternativa, potresti lanciare JS in una funzione e inserire un clic nel tuo HTML:

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

Ti suggerisco di leggere un po 'su JavaScript e HTML.


Gli altri hanno ragione sulla necessità di spostare anche <img> Sopra l'associazione di clic JS.

27
mpen

Non puoi associare un evento all'elemento prima che esista, quindi dovresti farlo nell'evento 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>
10
Guffa
<!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> 
1
Arun