JavaScript文本转语音按钮触发无响应，无法朗读段落求助

核心问题 #

你按钮的onclick事件里传的words.value是无效的——页面里根本没有名为words的元素，自然拿不到内容，导致朗读函数接收到空值，所以没有任何响应。

修改后的完整代码 #

<body>
  <h1>Web page heading</h1>
  <p id="speakit">Welcome to my web page</p>
  <button onclick="speak(document.getElementById('speakit').textContent)">Say it</button>

  <script>
    function speak(words) {
      const speech = new SpeechSynthesisUtterance();

      // 设置要朗读的文本
      speech.text = words;

      // 获取语音合成实例
      const speechSynthesis = window.speechSynthesis;

      // 开始朗读
      speechSynthesis.speak(speech);
    }
  </script>
</body>

关键改动说明 #

• 把按钮的onclick参数改成document.getElementById('speakit').textContent，直接获取指定段落的文本内容传递给朗读函数
• 修正了变量名拼写错误：speach改成speech（不影响功能但符合规范）

额外优化建议 #

你也可以把获取元素的逻辑放到函数内部，让HTML结构更简洁：

<body>
  <h1>Web page heading</h1>
  <p id="speakit">Welcome to my web page</p>
  <button onclick="speak()">Say it</button>

  <script>
    function speak() {
      const speech = new SpeechSynthesisUtterance();
      // 直接在函数内获取段落文本
      speech.text = document.getElementById('speakit').textContent;
      const speechSynthesis = window.speechSynthesis;
      speechSynthesis.speak(speech);
    }
  </script>
</body>

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