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

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

这是我得到的错误---如何解决它？如何在下面的代码中解决“无法读取属性appendChild of null”？

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

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

来源

2017-07-07 Isha Jindal

可能是因为名字的声音，而不是声音 –

的name是voice不voices。但是，更简单，更有效地通过ID获取元素

变化：

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

要

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

来源

2017-07-07 13:20:21 charlietfl

我的坏...谢谢！ –

你能否也请告诉我如何将两个值附加到el.textContent？例如。我希望它能显示声音[i] .name和voices [i] .lang .. –

尝试'var opt = voices [i] .name +' - '+ voices [i] .lang' – charlietfl

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

的方法之一是更新的的名属性<select>标签：
```
<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所附（即+）或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>

来源

2017-07-07 19:10:05

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

回答

相关问题