替换图像元素的 src 属性值

Question

I'm trying to replace the image source, but only if the image corresponds to the existing class "overview-icon--downtime". Then there's another class, "overview-icon--degraded", which I want to replace it with (or simply putting an image address, which might prove easier).

To be replaced:

<div class="page__overview">
<img class="page__overview-icon overview-icon--downtime" src="downtime_large.png">
</div>

To be replaced with:

<div class="page__overview">
<img class="page__overview-icon page__overview-icon--degraded" src="degraded_large.png">
</div>

I was thinking of this, but I'm not sure I'm heading in the right direction.

document.querySelector(".page__overview-icon overview-icon--downtime").setAttribute("img", "page__overview-icon page__overview-icon--degraded");

The image loads with the page, so I'll also need to use the AJAX at the end.

Any ideas here please? Thanks a lot in advance! :3

Answer 1

You are heading in the right direction.

Attributes are the things inside of the tags. In this instance, "class" and "src" are attributes of the img element.

document.querySelector will select the img element, you then need to call setAttribute('class', new class value ), and setAttribute('src', new src value )