Need help for updating html with javascript


what should I add in function update()

Please point your actual code instead of a picture. Thanks

const progress = document.getElementById("progress");

const prev = document.getElementById("prev");

const next = document.getElementById("next");

const circles = document.querySelectorAll(".circle");

let currentActive = 1;

next.addEventListener("click", () => {

currentActive++;

if (currentActive > circles.length) {

currentActive = circles.length;

}

update();

});

prev.addEventListener("click", () => {

currentActive--;

if (currentActive < 1) {

currentActive = 1;

}

update();

});

function update() { //I need help here

const update = document.getElementById(".progress");

}

const actives = document.querySelectorAll(".active");

progress.style.width =

((actives.length - 1) / (circles.length - 1)) * 100 + "%";

if (currentActive === 1) {

prev.disabled = true;

} else if (currentActive === circles.length) {

next.disabled = true;

} else {

prev.disabled = false;

next.disabled = false;

}

What exactly are you hoping to accomplish with the code posted vs. what is actually happening?

So I am hoping to accomplish a transition to 1-2 when pressing next or prev button with the class progress and without the function update it is not working.
image

After selecting the correct element, you can add a class to it by using the classList method add().

<div id="the-div"></div>
document.getElementById('the-div').classList.add('red');

Now the div has the class red, which you could then style in your CSS.


It would be extremely helpful if you could share a link to the instructions for this task you’re trying to accomplish, as well as a link to a testable version of your code such as on codepen.io or stackblitz.com. Otherwise we can only give you generic advice.