files/en-us/web/api/htmlelement/error_event/index.md
{{APIRef("HTML DOM")}}
The error event is fired on an element when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
This event is not cancelable and does not bubble.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("error", (event) => { })
onerror = (event) => { }
The event object is a {{domxref("UIEvent")}} instance if it was generated from a user interface element, or an {{domxref("Event")}} instance otherwise.
{{InheritanceDiagram("UIEvent")}}
<div class="controls">
<button id="img-error" type="button">Generate image error</button>
</div>
<div class="event-log">
<label for="eventLog">Event log:</label>
<textarea
readonly
class="event-log-contents"
rows="8"
cols="30"
id="eventLog"></textarea>
</div>
body {
display: grid;
grid-template-areas: "control log";
}
.controls {
grid-area: control;
display: flex;
align-items: center;
justify-content: center;
}
.event-log {
grid-area: log;
}
.event-log-contents {
resize: none;
}
label,
button {
display: block;
}
button {
height: 2rem;
margin: 0.5rem;
}
img {
width: 0;
height: 0;
}
const log = document.querySelector(".event-log-contents");
const badImg = document.querySelector(".bad-img");
badImg.addEventListener("error", (event) => {
log.textContent += `${event.type}: Loading image\n`;
console.log(event);
});
const imgError = document.querySelector("#img-error");
imgError.addEventListener("click", () => {
badImg.setAttribute("src", "i-dont-exist");
});
{{ EmbedLiveSample('Live_example', '100%', '150px') }}
{{Specifications}}
{{Compat}}