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未捕获的TypeError：无法读取null的属性'appendChild' 在SpeechSynthesis.populateVoices（SPEECH SYNTHESIZER.html：45）

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

Answer 1

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

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

变化：

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

要

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

Answer 2

这是我正在收到的错误 - 如何解决它？

一种方法是更新<select>代码的名称属性：
```
<select id="voices" name="voices">
```
或者javascript可以更新：
```
var voicesDropdown = document.querySelector('[name="voices"]');
```
如何将两个值附加到el.textContent？例如。我希望它显示voices[i].name和voices[i].lang

可以通过设置textContent属性来引用选项属性，并使用addition operator（即+）或String.concatenate()进行追加。
```
el.textContent = opt.name + ' - ' + opt.lang;
```

请参阅下面的代码段中演示的内容。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如何在下面的代码中解决“无法读取属性appendChild of null”的问题？

2 个答案: