为什么JavaScript无法将我输入的内容识别为inputname变量？

问题原因 #

• inputname变量作用域错误：你在saveName函数内部用var声明的inputname属于函数局部变量，仅在saveName函数执行范围内有效，外部的record函数无法访问到这个变量，运行时会直接触发变量未定义报错，导致逻辑终止。
• msg_notunderstood数组未定义：当语音识别结果不包含hello时，代码会尝试读取msg_notunderstood数组的随机值，但你全程没有声明过这个数组，同样会触发报错。
• 语音识别属性设置顺序错误：你先调用了recognition.start()再设置recognition.continuous = true，属性配置需要在启动识别前设置才能生效。
• 输出与语音内容不一致：你在hello命中分支两次调用随机数取值，会导致页面显示的文字和语音播报的内容不匹配。

修复方案 #

修改JS代码如下即可正常运行：

// 顶部新增全局变量声明
var inputname = '访客'; // 设默认值避免用户未输入姓名时显示异常
var msg_notunderstood = ["I don't know what you mean.", "Sorry I didn't catch that.", "Can you repeat it?"];

function record() {
  var recognition = new webkitSpeechRecognition();
  recognition.lang = "en-GB";
  recognition.continuous = true; // 配置移到start前
  recognition.start();
  recognition.onresult = function(event) {
    let transcript = event.results[0][0].transcript;
    var str = transcript;
    let msg_hello = ['Hello ' + inputname, 'Hello!', 'Hey ' + inputname];
    if (str.includes('hello')) {
      // 先存随机结果保证显示和语音一致
      const reply = msg_hello[Math.floor(Math.random() * msg_hello.length)];
      document.getElementById("output").innerHTML = reply;
      responsiveVoice.speak(reply);
    } else {
      const reply = msg_notunderstood[Math.floor(Math.random() * msg_notunderstood.length)];
      document.getElementById('output').innerHTML = reply;
      responsiveVoice.speak(reply);
    }
    document.getElementById('speechToText').value = event.results[0][0].transcript;
  }
}

//Mic Trigger Key
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    record()
  }
}
//Modal
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

//Input
function saveName() {
    // 去掉var直接给全局变量赋值
    inputname = document.getElementById('savedName').value;
    alert("You entered your name as " + inputname);
    modal.style.display = "none"; // 新增保存后自动关闭弹窗，不需要可以删掉
    return false;
}

内容的提问来源于stack exchange，提问作者Scollier