How to edit src of <figure> dynamically in js-CodePudding

I am trying to edit the src attribute of <figure> but am surprised to know that src is not an attribute on tag figure (might be wrong).

<figure data-asset-id="dfdsf"><img src="https:/assets/conference-gffe9859b2_640.jpg" data-asset-id="dfdsf" data-image-id="dfdsf" alt="conference pic"></figure>

with document.getAttribute on figure it returned

<img src="https://assets/conference-gffe9859b2_640.jpg" data-asset-id="dfdsf" data-image-id="dfdsf" alt="conference pic">

as a string so thought of converting it into HTML using DOM Parser but didn't work out for me.

any clue what I might be missing?

CodePudding user response：

Your <figure> element does not appear to have a src attribute but the <img> element does. In either case, first select the element, then get/set the attribute. There is a shortcut for .src.

document.querySelector("img").src;

document.querySelector("figure").setAttribute("name", "helloButton");

CodePudding user response：

<img id="uniqueId" src="https:/assets/conference-gffe9859b2_640.jpg" data-asset-id="dfdsf" data-image-id="dfdsf" alt="conference pic">

In JS, after loading or on any event/function

getElementById('uniqueId').src = 'newURL'

or by button

<button onclick="document.getElementById('uniqueId').src='newURL'">Turn off the light</button>