更改 div 以增加进度条

Question

我正在努力让我的进度条在说出特定单词时增加（宾果游戏）这是用户和聊天机器人之间的对话，用户试图猜测聊天机器人陈旧的秘密。每次用户做对时，聊天机器人都会回复“宾果！”我希望每次聊天机器人回复“宾果！”时增加进度条，当进度达到 100% 时，它应该重新回到 0%。我得到进度条显示，但它没有增加。我正在考虑必须循环遍历 div 以查找“Bingo”并更改进度条中的 div。或者简单地将“Bingo”作为变量并将其与 div="bingo1" 匹配，然后增加进度条。什么是最有效的方法？

我正在使用 chatterbot，它在 .yml 文件中包含用户和聊天机器人之间的对话，因此可以在那里做一些事情

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>

Answer 1

他可能给出了不同的答案，因为他不太明白自己想要什么。在下面的解决方案中，进度条将随着 Bingo 表达式输入到 id 值为 bingo1.

的项目中增加。

如果您要问不同的问题，请编辑此答案下方的问题或评论。

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>

更改 div 以增加进度条

change div to increase progress bar

html

javascript

css

progress-bar