web-dev-qa-db-fra.com

Comment ajouter un événement .click () à une image?

J'ai un script qui place une image basée sur un clic de souris grâce à Jose Faeti . Maintenant, j'ai besoin d'aide pour ajouter un événement .click () au code ci-dessous afin que lorsqu'un utilisateur clique sur l'image, il exécute la fonction indiquée dans le script.

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

J'ai mis le code entier ci-dessous, au cas où vous voudriez le voir.

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

Aidez-moi?

javascripteventsmouseevent
15
SS'

Tout d'abord, cette ligne

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

Vous mélangez HTML et JavaScript. Ça ne marche pas comme ça. Débarrassez-vous de la .click() là-bas.

Si vous lisez le JavaScript que vous avez là, document.getElementById('foo') il cherche un élément HTML avec un ID de foo. Vous n'en avez pas. Donnez à votre image cet ID:

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

Alternativement, vous pouvez lancer le JS dans une fonction et mettre un onclick dans votre HTML:

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

Je vous suggère cependant de faire un peu de lecture sur JavaScript et HTML.

Les autres ont raison de devoir déplacer le <img> Au-dessus de la liaison de clic JS.

27
mpen

Vous ne pouvez pas lier un événement à l'élément avant qu'il n'existe, vous devez donc le faire dans l'événement 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