Como puede ver en mi código, la barra de progreso no aumenta ni en unidades. Necesito que el contenedor siga respondiendo pero que la barra de progreso aumente en unidades iguales.
function increaseProgress() { var progressBar = document.querySelector(".progress-bar") var currWidth = progressBar.clientWidth; progressBar.style.width = currWidth + 10 + "%"; } .progress-container { width: 100%; height: 20px; outline: solid 2px #ccc; border-radius: 20px; } .progress-bar { width: 0; height: inherit; background: blue; border-radius: 20px; } <div class="progress-container"> <div class="progress-bar"></div> </div> <button onclick="increaseProgress()">Click to increase</button>@evolutionxbox hace una buena sugerencia en los comentarios. Es mucho más flexible que este enfoque manual que está tomando.
Sin embargo, si todavía está buscando una solución para su código actual, aquí tiene una:
Primero, debe averiguar cuánto es el ancho total del contenedor. En otras palabras, averiguar cuánto es "10 por ciento".
Una vez que lo descubra, simplemente puede aumentar el ancho de la barra actual en una décima parte del ancho del contenedor. También queremos evitar que aumente más allá del 100%.
function increaseProgress() { var progressBar = document.querySelector(".progress-bar") var progressContainer = document.querySelector(".progress-container") var barWidth = progressBar.clientWidth; var containerWidth = progressContainer.clientWidth; if (barWidth >= containerWidth) return; progressBar.style.width = (barWidth + containerWidth / 10) + "px"; } .progress-container { width: 100%; height: 20px; outline: solid 2px #ccc; border-radius: 20px; } .progress-bar { width: 0; height: inherit; background: blue; border-radius: 20px; } <div class="progress-container"> <div class="progress-bar"></div> </div> <button onclick="increaseProgress()">Click to increase</button>