I'm working on a progress bar for a bigger project. The progress bare increases when a certain word is entered, the word is based on the element's id (Maybe using getElementByClassName would be better). I'm now facing a logical issue where the other ids do not match or increase the progress bar. I'm thinking of experimenting with other solutions such as a switch statement or (maybe the best solution) having the "right" word in a list and if they are inputted into the input bar the progress bar should increase a certain percentage. How would I go about solving it most efficiently?
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>