Question

0

54

Views

Increase progress bar using input field accepting mutiple ids

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>

3 months ago ·

Juan Pablo Isaza

Answer question

Find remote jobs

Loading