J'essaie de faire en sorte que lorsque je clique sur l'image, une autre image s'affiche sur la même page, mais dès maintenant, lorsque je clique sur l'image, elle ne me donne que le lien de l'image au lieu de me donner l'image.

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="output"></p>
   
<img id="ima1" src="https://i.imgur.com/pe18NpF.jpg" style="width:150px">
<div id="image1"></div>
<script>
var images = [
    'https://i.imgur.com/xwZRPaT.jpg'
];

document.getElementById("ima1").addEventListener("click", showPic4);
function showPic4() {
document.getElementById("image1").innerHTML = images[0];
}

</script>

</body>
</html>
0
James Lin 8 nov. 2019 à 07:25

3 réponses

Dans votre exemple, vous n'avez qu'une chaîne de texte. Vous devez cibler un <img> existant et modifier l'attribut src ou créer un nouveau <img>. J'ai fait la deuxième option.

Il y a beaucoup de façons de le faire et beaucoup de différends sur les meilleures.

var images = [
  'https://i.imgur.com/xwZRPaT.jpg'

];

document.getElementById("ima1").addEventListener("click", showPic4);

function showPic4() {
  document.getElementById("image1").innerHTML = "<img src=" + images[0] + ">";
}
<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>

  <h2>JavaScript Arrays</h2>

  <p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

  <p id="output"></p>

  <img id="ima1" src="https://i.imgur.com/pe18NpF.jpg" style="width:150px">
  <div id="image1"></div>
  <script>
  </script>

</body>

</html>
0
John Pavek 8 nov. 2019 à 04:42

La source d'image (lien) doit être associée à sa balise img pour fonctionner avec innerHTML Ici srcdata contient l'élément img:

document.getElementById("ima1").addEventListener("click", showPic4);
function showPic4() {
   var srcdata="<img id='ima1'  src="+images[0]+"  style='width:150px'>";
   document.getElementById("image1").innerHTML = srcdata;
}
0
WailenB 8 nov. 2019 à 05:00

Le premier problème avec votre JavaScript est dans cette ligne ici:

document.getElementById("image1").innerHTML = images[0];

Ce que vous faites ici, c'est que vous obtenez l'élément HTML avec l'ID "image1", puis que vous définissez son code HTML interne sur la valeur des images [0].

La raison pour laquelle vous obtenez le lien de l'image au lieu de l'image est que la valeur à l'intérieur des images [0] est une chaîne, pas une image.

Il existe de nombreuses façons d'atteindre votre objectif initial. Une façon, en gardant la cohérence avec votre code actuel, est de cibler l'attribut src d'une balise img. Considérez le bloc de code ci-dessous:

<img id="img1" src="https://large-type.com/twitter-card.png?v2" style='width:150px'>
<img id="img2" style='width:150px'></img>
<script>
    var images = [
        'https://images.megapixl.com/5692/56920966.jpg'
    ];

    document.getElementById("img1").addEventListener("click", showPic);
    
    function showPic() {
        document.getElementById("img2").setAttribute('src', images[0]);
    }
</script>

La différence ici est que l'élément HTML que la fonction showPic cible est un élément img au lieu d'un div. Maintenant, nous pouvons simplement ajouter un img src comme vous l'avez fait pour la première image en utilisant le setAttribute une fonction.

J'espère que cela t'aides!

1
Ansh Shukla 8 nov. 2019 à 05:22