如何在下面的代码中解决“无法读取属性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
的name
是voice
不voices
。但是,更简单,更有效地通过ID获取元素
变化:
var voicesDropdown = document.querySelector('[name="voices"]');
要
var voicesDropdown = document.querySelector('#voices');
我的坏...谢谢! –
你能否也请告诉我如何将两个值附加到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
andvoices[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>
可能是因为名字的声音,而不是声音 –