如何解析以下代码中的 "cannot read property appendChild of null"？

Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> speech synthesizer</title>
  </head>
  <body>
    <div class="voiceinator">
      <h1> My Speech Synthesizer </h1>

      <select id="voices" name="voice">
        <option value="">Select a voice</option>
      </select>

    <label for="rate">Rate:</label>
    <input type="range" name="rate" value="1" min="0" max="3" step="0.1">

    <label for="pitch">Pitch:</label>
    <input type="range" name="pitch" min="0" max="2" step="0.1">

    <textarea name="text"> Hello there! </textarea>
    <button type="button" id="stop"> Stop! </button>
    <button type="button" id="speak"> Speak </button>
    </div>
 <script type="text/javascript">

  const msg = new SpeechSynthesisUtterance();
  let voices = [];
  var voicesDropdown = document.querySelector('[name="voices"]');
  const options = document.querySelector('[name="range"], [name="text"]'); // this selects the rate control bar, pitch bar and text area
  const speakButton = document.querySelector('#speak');
  const stopButton = document.querySelector('#stop');
  msg.text = document.querySelector('[name="text"]').value;

  function populateVoices()
  {
    voices = this.getVoices();

    for( var i=0 ; i<voices.length ; i++ ){
      var opt = voices[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      voicesDropdown.appendChild(el);
    }

  }
  //when speechSynthesis loads , voiceschanged event occurs and populateVoices function is fired
  speechSynthesis.addEventListener('voiceschanged', populateVoices);
 </script>
  </body>
</html>

这是我遇到的错误 --- 如何解决？

SPEECH SYNTHESIZER.html:45 Uncaught TypeError: Cannot read property 'appendChild' of null at SpeechSynthesis.populateVoices (SPEECH SYNTHESIZER.html:45)

另请告诉我如何将两个值附加到 el.textContent？例如。我希望它显示 voices[i].name 和 voices[i].lang

Answer 1

<select> 上的 name 是 voice 而不是 voices。但是通过 ID

获取该元素更简单、更有效

变化：

var voicesDropdown = document.querySelector('[name="voices"]');

到

var voicesDropdown = document.querySelector('#voices');

Answer 2

THIS IS THE ERROR I AM GETTING --- HOW TO RESOLVE IT?

一种方法是更新 <select> 标签的 name 属性：
```
<select id="voices" name="voices">
```
或者 javascript 可以更新：
```
var voicesDropdown = document.querySelector('[name="voices"]');
```
how do I append two values to el.textContent? For eg. I want it to display voices[i].name and voices[i].lang

可以通过设置 textContent 属性来引用选项属性，并使用 addition operator (i.e. +) or String.concatenate().
附加
```
el.textContent = opt.name + ' - ' + opt.lang;
```

在下面的代码片段中看到这一点。

const msg = new SpeechSynthesisUtterance();
let voices = [];
var voicesDropdown = document.querySelector('[name="voices"]');
const options = document.querySelector('[name="range"], [name="text"]'); // this selects the rate control bar, pitch bar and text area
const speakButton = document.querySelector('#speak');
const stopButton = document.querySelector('#stop');
msg.text = document.querySelector('[name="text"]').value;

function populateVoices() {
  voices = this.getVoices();

  for (var i = 0; i < voices.length; i++) {
    var opt = voices[i];
    var el = document.createElement("option");
    el.textContent = opt.name + ' - ' + opt.lang;
    el.value = opt;
    voicesDropdown.appendChild(el);
  }

}
//when speechSynthesis loads , voiceschanged event occurs and populateVoices function is fired
speechSynthesis.addEventListener('voiceschanged', populateVoices);

<div class="voiceinator">
  <h1> My Speech Synthesizer </h1>

  <select id="voices" name="voices">
        <option value="">Select a voice</option>
      </select>

  <label for="rate">Rate:</label>
  <input type="range" name="rate" value="1" min="0" max="3" step="0.1">

  <label for="pitch">Pitch:</label>
  <input type="range" name="pitch" min="0" max="2" step="0.1">

  <textarea name="text"> Hello there! </textarea>
  <button type="button" id="stop"> Stop! </button>
  <button type="button" id="speak"> Speak </button>
</div>

如何解析以下代码中的 "cannot read property appendChild of null"？

how to resolve "cannot read property appendChild of null" in the following code?

html

javascript

speech-synthesis