CODEWITHSUNDEEP
javascripthtmlcssprogress-bar
user3768971
user3768971

Reputation: 117

change div to increase progress bar

I'm working to have my progress bar increase when a specific word is said (Bingo) This is a conversation between a user and a chatbot, where the user is trying to guess a secret that the chatbot olds. Every time the user gets it right, the chatbot replies with "Bingo! " I was hoping to increase the progress bar every time the chatbot replies with "Bingo! " and when the progress bare hits 100% it should restart back to 0%. I get the progress bar shows, but it does not increase. I was thinking of having to loop through the div to look for "Bingo" and change the div in the progress bar. Or simply have a "Bingo" as a variable and match it to the div="bingo1" and then increase the progress bar. What would be the most efficient way? enter image description here

I'm using chatterbot which contains the conversation between the user and chatbot in a .yml file, so it is possible to do something there

function myBingo(){
  if (document.getElementById('bingo1').innerHTML.indexOf("Bingo")){ 
    // change progress bar to 10%
  } 
}
#progress {
 width: 500px;   
 border: 1px solid black;
 position: relative;
 padding: 3px;
}
#percent {
 position: absolute;   
 left: 50%;
}
#bar {
 height: 20px;
 background-color: green;
 width: 0%;
}
<!-- I added an id here -->
<div class="msg-text" id="bingo1">Bingo! The secret is Garfield</div>

<div id="progress">
    <span id="percent">0%</span>
    <div id="bar"></div>
</div>

Upvotes: 1

Views: 564

Answers (1)

Sercan
Sercan

Reputation: 5081

He might have given a different answer as he didn't quite understand what he wanted. In the solution below, the progress bar will be increased by the number of Bingo expressions entered into the item whose id value is bingo1.

If you're asking something different, please edit the question or comment below this answer.

enter image description here

let percent = document.getElementById('percent');
let bar = document.getElementById('bar');
let input = document.getElementById('bingo1');
let counter = 0;

function update() {
  if (input.value.indexOf("Bingo") != -1)
  { 
    var count = (input.value.match(/Bingo/g) || []).length;
    counter = count * 10;
    
    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%;
}

#bar {
 height: 20px;
 background-color: green;
 width: 0%;
}
<label>Input: </label>
<input class="msg-text" id="bingo1"><br><br>

<div id="progress">
    <span id="percent">0%</span>
    <div id="bar"></div>
</div><br><br>

Upvotes: 1

Related Questions