Javascript addEventListener Multi function

Question

I want to make a progress bar, if you look at my code I am trying each time I click Next changing progress.style.width, for example, first time 33.33% and next 66.66% and last time 100%.

this is my first time asking a question in Stackoverflow sorry if I'm too new!

const next = document.querySelector("#next");

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

next.addEventListener("click", function() {
  progress.style.width = "33%";
});

.progress {
  height: 10px;
  background: blue;
  width: 0%
}

<button id="next">Next</button>

<br/>
<br/>
<div class='progress'></div>

Phil · Accepted Answer · 2022-08-03 04:14:58Z

1

You need to maintain some state for the current progress. I would recommend a separate variable but you could also parse the current progress.style.width value

const next = document.querySelector("#next");
const progress = document.querySelector(".progress");

next.addEventListener("click", () => {
  const current = parseFloat(progress.style.width || "0");
  const width = `${Math.min(current + 100/3, 100)}%`;
  progress.style.width = width;
});

.progress-container {
  border: 1px solid;
  width: 200px;
  height: 1rem;
}
.progress {
  height: 1rem;
  width: 0;
  background-color: blue;
}

<button id="next">Next</button>

<div class="progress-container">
  <div class="progress"></div>
</div>

answered Aug 3, 2022 at 4:14

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zer00ne · Accepted Answer · 2022-08-03 04:52:05Z

0

Put .progress in a bigger container then define a value outside of function. Increase that value incrementally within the function. See closures

const next = document.querySelector("#next");

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

let ratio = 0;

next.addEventListener("click", function() {
  ratio += 33.33;
  ratio = ratio > 100 ? 100 : ratio;
  progress.style.width = ratio+'%';
});

.fullbar {
  background: yellow;
  width: 50vw;
  border: 2px inset blue;
}
  
.progress {
  height: 10px;
  background: blue;
  width: 0%
}

<button id="next">Next</button>

<br/>
<br/>
<section class='fullbar'>
<div class='progress'></div>
</section>

edited Aug 3, 2022 at 4:52

answered Aug 3, 2022 at 4:46

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

2 Comments

Silviu Burcea Over a year ago

Stops before 100, oh no!

zer00ne Over a year ago

That .01% is essential! :)

Collectives™ on Stack Overflow

Javascript addEventListener Multi function

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related