为什么我的语音识别结果会被覆盖？

Question

我有一个网页，可以记录用户的语音并将其附加到 HTML 表单中。该代码正在“工作”，但一旦语音识别停止然后重新启动，新的语音到文本数据将覆盖第一个框的数据。我希望将下一个重新启动的语音文本仅附加到第二个框，而不是第一个框，同时将第一个框的数据保留在那里。

JS：

<form class="texts" action="/care" id="careid" name="care" method="POST">
                      <input type="text" id="name" placeholder="what's your name?">
                      <input type="text" id="location" placeholder="Where are you?">
                      <input type="text" id="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>
              window.SpeechRecognition =
                window.SpeechRecognition || window.webkitSpeechRecognition;

              const recognition = new SpeechRecognition();
              recognition.interimResults = true;

              let p = document.createElement('p');


              recognition.addEventListener("result", (e) => {
                const text = Array.from(e.results)
                document.getElementById("name").value = event.results[0][0].transcript;
                }
              );

              recognition.addEventListener("end", () => {
                recognition.start();
                recognition.addEventListener("result", (e) => {
                  const text = Array.from(e.results)
                  document.getElementById("location").value = event.results[0][0].transcript;
                });
              });
            </script>

Answer 1

如何为输入标签定义一个默认值变量，而不是直接向表单添加值，您可以将其分配给变量，然后在表单中获取其更新。

Answer 2

我们可以将输入放在一个数组中，然后让一个计数器告诉我们要写入哪一个。

let counter = 0;
let inputs = document.querySelectorAll('input[type=text]')
recognition.addEventListener("result", (e) => {
  if (inputs.length< counter) inputs[counter].value = e.results[0][0].transcript;
  counter++;
});