Estoy trabajando en una barra de progreso para un proyecto más grande. El progreso aumenta cuando se ingresa una determinada palabra, la palabra se basa en la identificación del elemento (tal vez sería mejor usar getElementByClassName). Ahora me enfrento a un problema lógico en el que las otras identificaciones no coinciden o aumentan la barra de progreso. Estoy pensando en experimentar con otras soluciones, como una declaración de cambio o (tal vez la mejor solución) tener la palabra "correcta" en una lista y si se ingresan en la barra de entrada, la barra de progreso debería aumentar un cierto porcentaje. ¿Cómo haría para resolverlo de la manera más eficiente?
let percent = document.getElementById('percent'); let bar = document.getElementById('bar'); let input = document.getElementById('box1'); //maybe having a list of the ids works better,loop throug and match and increase them in the input let solution=['box1','box2','box3','box4','box5'];//list of right words /* or a switch statment switch (input.value.indexOf('')) { case 'box1': update() ; break; } */ // updates the progress bar if id esist function update() { // see if 'box1' exist, how to make it for other ids? if (input.value.indexOf('box1') != -1) //maybe use the list in here { // match by 'box1' var count = (input.value.match(/box1/g) || []).length; //var count2 = (input.value.match(/box2/g) || []).length; counter = count * 10; //increase 'box1' progress bar 10% //counter2 = count2 *30; //increase 'box2' progress bar 30% if(counter >= 100) counter = 100; percent.innerHTML = `${counter}%`; bar.style.width = `${counter}%`; } } input.addEventListener('input', update); #progress { width: 500px; border: 1px solid black; position: relative; padding: 3px; } #percent { position: absolute; left: 50%; bottom: 25px; } #bar { height: 20px; background-color: green; width: 0%; top: 20px; } #box1{ position: righ; right: 100%; bottom: 25px; } <html> <body> <link rel="stylesheet" href="progress.css"> <label>Input: </label> <!-- working id --> <input class="testing" id="box1"> <!-- Here i have other ids --> <div class="testing" id="box2"></div> <div class="testing" id="box3"></div> <div class="testing" id="box4"></div> <div id="progress"> <span id="percent">0%</span> <div id="bar"></div> </div><br> </body> </html>