Как мне сохранить источник изображения внутри массива? - PullRequest
Новая
       5

Как мне сохранить источник изображения внутри массива?

0 голосов
/ 08 ноября 2019

Я пытаюсь сделать так, чтобы при нажатии на изображение на той же странице отображалось другое изображение, но на данный момент, когда я нажимаю на изображение, оно дает мне только ссылку на изображение, а не дает мнеизображение. 

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

Ответы [ 3 ]

2 голосов
/ 08 ноября 2019

Первая проблема с вашим JavaScript в этой строке: 

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

Что вы делаете здесь, так это то, что вы получаете элемент HTML с идентификатором "image1", а затем устанавливаете его внутренний HTMLк значению в изображениях [0].

Причина, по которой вы получаете ссылку на изображение вместо изображения, заключается в том, что значение внутри images [0] является строкой, а не изображением.

Существует много способов добиться вашего оригинала. Цель. Одним из способов сохранения согласованности с текущим кодом является назначение атрибута src тега img. Рассмотрим кодовый блок ниже:

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

Разница в том, что HTML-элемент, на который нацелена функция showPic, является элементом img, а не div. Теперь мы можем просто добавить img src, как вы сделали для первого изображения, используя функцию setAttribute .

Надеюсь, это поможет!

1 голос
/ 08 ноября 2019

Источник изображения (ссылка) должен быть связан с его тегом img для работы с innerHTML Здесь srcdata содержит элемент 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 голосов
/ 08 ноября 2019

В вашем примере, у вас есть только строка текста. Вам нужно либо нацелиться на существующий <img> и изменить атрибут src, либо создать новый <img>. Я сделал второй вариант.

Есть много способов сделать это, и много споров о том, какие из них являются лучшими. 

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