Функция JavaScript для изменения HTML не работает

Question

У меня есть задание сделать следующее: Измените текст div с id = "image" на альтернативный текст предварительного изображения.

Я пробовал это:

function upDate(previewPic){
    document.getElementById("image").innerHTML=element.alt;
}

Это мой HTML-код для div:

<img class = "preview" alt = "Styling with a Bandana" src = "img.jpg" onmouseover = "upDate(this)">

Это не работает для меня, что я делаю неправильно

Answer 1

Я думаю, вы не определяете идентификатор тега изображения. Ссылка: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml Кроме того, в сообщении alter есть другой тег div. Это лучше для четкого вывода

Answer 2

Вы можете попробовать этот код

  function upDate(previewPic){
   var image = document.getElementById("YourimgId");
   document.getElementById("image").innerHTML= image.getAttribute("alt");
}

Answer 3

Можете ли вы попробовать это

 <img class = "preview" alt = "Styling with a Bandana" src = "img.jpg" onmouseover = "upDate(this);">
<div id="image">

</div><!--  -->

<script>
function upDate(previewPic){
    document.getElementById("image").innerHTML=previewPic.alt;
}</script>

Answer 4

Вам необходимо присоединить mouseover прослушиватель событий к элементу img и получить значение атрибута alt тега img.

const div = document.getElementById('target');
const image = document.getElementById('image');

image.addEventListener('mouseover', (e) => {
  div.innerHTML = image.getAttribute('alt');
});

image.addEventListener('mouseout', (e) => {
  div.innerHTML = ''
});

body {
  display: flex;
  justify-content: space-around;
}

#target {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

<img src="https://picsum.photos/id/237/150/150" alt="dog" id="image"/>
<div id="target"></div>

Answer 5

это должно работать, вы должны сначала получить значение атрибута, чтобы установить его

function upDate(previewPic){
    var x = document.getElementById("image").getAttribute('alt')
    document.getElementById("image").innerHTML= x;
}