Блог

У меня есть тег изображения и диапазона. Если изображение не загружается из-за ошибки, я хотел бы удалить элемент image из DOM и изменить содержимое диапазона с помощью id loadErrorSpan , чтобы сказать "Access Denied. Please login." , что в противном случае это было бы "Loading...Please wait"

 <img src="SomeImage.jpg" onerror="this.remove();" 
     alt="Some Image" width="100" height="120">
<br>
<span id="loadErrorSpan" style="font-family: sans-serif; 
   font-size:18px;text-align: center;color: #666;">Loading...Please wait</span>
  

Я смог удалить изображение по ошибке, но не изменить содержимое диапазона. Как мне это сделать, используя только JavaScript. Не следует использовать Jquery или любую другую библиотеку.

Вы могли бы создать onerror определенный обработчик, в котором также замените содержимое диапазона

 function onImgLoadError(imgEl) {
  imgEl.remove()
  document.getElementById('loadErrorSpan').innerText = 'Loading failed'
}  

 <img src="SomeImage.jpg" onerror="onImgLoadError(this)" alt="Some Image" width="100" height="120">
<br>
<span id="loadErrorSpan" style="font-family: sans-serif; 
   font-size:18px;text-align: center;color: #666;">Loading...Please wait</span>  

Вы можете получить span элемент, используя document.getElementById , а затем изменить содержимое span using innerHTML .

 function remove() {
  document.getElementById("loadErrorSpan").innerHTML = "Access Denied. Please login.";
}  

 <img src="SomeImage.jpg" onerror="remove();" 
     alt="Some Image" width="100" height="120">
<br>
<span id="loadErrorSpan" style="font-family: sans-serif; 
   font-size:18px;text-align: center;color: #666;">Loading...Please wait</span>