Changer l'image en cliquant sur le bouton

Cela semble comme il devrait fonctionner, mais ne le fait pas. Je ne sais pas où est le problème: soit je suis en train de faire mal, ou c'est possible, j'ai une erreur de syntaxe. Je viens juste de ne pas faire n'importe quoi. Je vais essayer d'obtenir l'image actuelle à changer lorsque le bouton est cliqué. Je suis un débutant en Javascript, donc s'il vous plaît être doux 😉 Merci!!!!

<html>
<script>
function pictureChange()
{
document.getElementById(theImage).src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png");
}
</script>
<body>
<img id="theImage" src="http://31.media.tumblr.com/18b5f8f0a00ad01e50f7ae2f513be52d/tumblr_msqcl4iwM01soh1p8o1_500.png">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange()"></p>
</body>
</html>
  • C'est quelque chose que vous pouvez déboguer vous-même. Regardez dans le console d'erreur JavaScript et vérifiez que le message d'erreur dit.
InformationsquelleAutor user2884447 | 2013-10-26
  1. 4

    Vous avez manqué les citations dans le .getElementById('theImage')

     function pictureChange()
    {
    document.getElementById('theImage').src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
    }
    InformationsquelleAutor Roar
  2. 2

    Ajouter " à getElementById argument et supprimer ) à la fin de la ligne:

    <script>
    function pictureChange()
    {
          document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
    }
</script>

    http://jsfiddle.net/cDd8J/ - ici. Elle fonctionne.

    theImage est juste l'id de l'élément, pas variable, de sorte que vous devez le mettre entre guillemets.

    InformationsquelleAutor Crazy Yoghurt
  3. 0

    Il y a beaucoup de manières que vous pourriez essayer.L'appel de la fonction à l'aide de inline attributs ou d'appel à l'aide de l'id dans votre script.En voilà une, de

    theButton.onclick = function pictureChange()
{
   document.getElementById("theImage").src="http://31.media.tumblr.com/fca646cd8fe87906e605ad7e8d039903/tumblr_mmoz4fWT6U1soh1p8o1_500.png";
}

    Démo

    InformationsquelleAutor Ashad Shanto
  4. 0

    Vous pouvez utiliser inline HTML:
    <img src="img1.jpg" onclick="this.src='img2.jpg'"> fonctionne le mieux.

    InformationsquelleAutor CoderKube