2015-12-10 2 views
0

Veuillez trouver le code et nous vous informer. J'essaie d'ajouter une autre image ('correct10.png') OnClick Événement de l'image affichée i.e 'Van.png'. Mais rien ne s'est passé, alors s'il vous plaît suggérer.Ajouter une autre image en utilisant Javascript

Voici le code html:

<!DOCTYPE html > 
<html lang="en"> 
<head> 
<title>Adding Another Image onClick</title> 
<script> 
function doImgSwap() 
{ 
document.getElementById('newImg').addEventListener('click', function(e){ 
var img = document.createElement('img'); 
img.setAttribute('src','correct10.png'); 
e.target.appendChild(img); 
}); 
} 
</script> 
</head> 
<body> 
<p><a href="#" id="newImg" onClick="doImgSwap()"><img src="van.png"></a></p> 
</body> 
</html> 

Répondre

0

Votre méthode doImgSwap crée un gestionnaire d'événements, elle n'échange pas réellement l'image.

devrait être:

function doImgSwap(el){ 
    var img = document.createElement('img'); 
    img.setAttribute('src','correct10.png'); 
    el.appendChild(img); 
} 

Et vous aurez à passer dans l'élément dans l'attribut onClick, comme celui-ci

onClick="doImgSwap(this)"

est ici un working jsfiddle of your code

0

Votre code doit être

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
     <title>Adding Another Image onClick</title> 
     <script> 
      window.onload = function() { 
       document.getElementById('newImg').addEventListener('click', function(e) { 
        var img = document.createElement('img'); 
        img.setAttribute('src', 'correct10.png'); 
        this.appendChild(img); 
       }); 
      } 
     </script> 
    </head> 

    <body> 
     <p> 
      <a href="#" id="newImg"> 
       <img src="van.png"/> 
      </a> 
     </p> 
    </body> 

</html> 
+0

merci cher, aussi PL. suggérer si j'ai 3 options et que vous devez en choisir une, comme celle que nous choisissons en utilisant les boutons radio, dans ce cas comment pouvons-nous trouver l'élément et vouloir le placer de manière fonctionnelle sur l'élément cliqué. –

0

Commencez par mettre le fichier js sous votre code html ou utiliser la fonction window.onload pour être sûr

<!DOCTYPE html > 
<html lang="en"> 
    <head> 
    <title>Adding Another Image onClick</title> 
    </head> 
    <body> 
    <p><a href="#" id="newImg" onClick="doImgSwap()"><img src="van.png"></a></p> 
    <script> 
function doImgSwap() 
{ 
document.getElementById('newImg').addEventListener('click', function(e){ 
var img = document.createElement('img'); 
img.setAttribute('src','correct10.png'); 
e.target.appendChild(img); 
}); 
} 
</script> 
</body> 
</html> 
+0

désolé cher, mettre le même code en HTML, pas rien s'est passé. –