Quiero hacer una barra de progreso, si miras mi código, lo intento cada vez que hago clic en Siguiente cambiando el progreso.estilo.ancho, por ejemplo, la primera vez 33.33% y la siguiente 66.66% y la última vez 100%.
esta es la primera vez que hago una pregunta en Stackoverflow, ¡lo siento si soy demasiado nuevo!
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>Necesita mantener algún estado para el progreso actual. Recomendaría una variable separada, pero también podría analizar el valor actual progress.style.width
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>Coloque .progress en un contenedor más grande y luego defina un valor fuera de la función. Aumente ese valor de forma incremental dentro de la función. Ver cierres
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>