如何将这个js语音识别代码转换为for循环

Question

我有三个js语音识别的输入框，用于收集用户语音，进行语音识别，然后附加到输入表单中。我不知道如何简单地使用for循环来实现这一点。我浏览了stackoverflow、reddit、youtube和基本的谷歌，但仍然不明白。如有任何建议和/或帮助，我们将不胜感激。

代码：

<div class="container" id="therapist_container">
<div id="button">
<button type="button" class="btn btn-primary" onclick="record()" id="therapist-button" data-toggle="modal" data-target="#myModal">Talk with Delphi</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="vid1Title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<video width="100%" id="video1">
<source src="./static/movie.mp4" type="video/mp4">
</video>
<form class="texts" action="/care" id="careid" name="care" method="POST">
<input type="text" id="name" name="name" placeholder="what's your name?">
<input type="text1" id="location" name="location" placeholder="Where are you?">
<input type="text1" id="state" name="state" placeholder="how can I help?">
<input id="buttonInput" class="btn btn-success form-control" type="submit" value="Send">
</form>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#video1')[0].play();
})
$('#myModal').on('hidden.bs.modal', function () {
$('#video1')[0].pause();
})
video = document.getElementById('video1');

function record() {
var recognition = new webkitSpeechRecognition() || SpeechRecognition();
recognition.interimResults = true;
recognition.lang = "en-US";
recognition.start();

recognition.onresult = function(event) {
console.log(event);
document.getElementById("name").value = event.results[0][0].transcript;
}

recognition.addEventListener("end", () =>{
recognition.start();
recognition.onresult = function(event) {
document.getElementById("location").value = event.results[0][0].transcript;
}
})
recognition.addEventListener("end", () =>{
recognition.start();
recognition.onresult = function(event) {
document.getElementById("state").value = event.results[0][0].transcript;
}
})
// recognition.addEventListener("end", () =>{
//     recognition.start();
//     recognition.onresult = function(event) {
//       document.getElementById("state").value = event.results[0][0].transcript;
//   }

//   // recognition.addEventListener("end", () => {
//   //   window.location.pathname = '/care';
//   //   document.care.submit();
//   // });
// })
}  
</script>
</div>
</section>

Answer 1

这是您所期望的吗？

recognition.addEventListener("end", () =>{
const boxes = [ "location", "state"];
for( var box in boxes ) {
recognition.start();
recognition.onresult = function(event) {
document.getElementById(box).value = event.results[0][0].transcript;
}
}
})