如何用JS验证<option>的值?
How to verify value of <option> with JS?
我制作了一个包含 <option>
项的列表,每当我尝试使用脚本验证选择了哪一项时,Chrome 中的控制台会显示:
Uncaught TypeError: Cannot read property 'value' of null
我在 HTML 和 JS 中都没有看到我的代码有什么问题,一切似乎都很正常?
这是 HTML:
<select name="part" id="optionFonts">
<option value="default">--- Choose what you want the changes to affect --- </option>
<option value="all"> ALL ELEMENTS </option>
<option value="title-and-headings"> TITLES AND HEADINGS </option>
<option value="headings"> ALL HEADINGS </option>
<option value="allpars"> ALL PARAGRAPHS </option>
<option value="title"> TITLE </option>
<option value="heading1"> FIRST HEADING </option>
<option value="par1"> FIRST PARAGRAPH </option>
<option value="par2"> SECOND PARAGRAPH </option>
<option value="par3"> THIRD PARAGRAPH </option>
<option value="par4"> FOURTH PARAGRAPH </option>
<option value="heading2"> SECOND HEADING </option>
<option value="par5"> FIFTH PARAGRAPH </option>
</select>
而在 JS 中
var optionFonts = document.getElementById('optionFonts');
var title = document.getElementById('stitle');
var div1Title = document.getElementById('d1Title');
var div1Par = document.getElementById('d1Par');
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
var p3 = document.getElementById('p3');
var d2Title = document.getElementById('d2Title');
var d2Par = document.getElementById('d2Par');
function changeTextFontToBebas() {
switch(optionFonts.value) {
case 'all':
title.style.fontFamily = "Bebas";
div1Title.style.fontFamily = "Bebas";
div1Par.style.fontFamily = "Bebas";
p1.style.fontFamily = "Bebas";
p2.style.fontFamily = "Bebas";
p3.style.fontFamily = "Bebas";
d2Title.style.fontFamily = "Bebas";
d2Par.style.fontFamily = "Bebas";
break;
}
}
当我按下有关该字体的框(在本例中为 Bebas 字体)时,它应该会更改所有内容的字体,当我按下它时,它将 运行 function changeTextFontToBebas()
功能也将验证首先检查了什么,但它只是给出了那个错误。
提前致谢
确保在页面上完全加载元素后 select 加载该元素。 "undefined" 通常是在渲染之前读取元素的结果。您的代码未引用函数内的元素,因此它是在脚本 运行 时设置的。如果元素之前的脚本 运行s 在页面上,它将找不到该元素。就像在您进入房间之前有人叫您的名字一样。你不会听到他们的声音。
将脚本放在结束正文标记之前或在文档准备就绪时调用它或 window.onload。
要获取值,引用 select,获取选项,通过 selected 索引引用它。
var select = document.getElementById("optionFonts");
var value = select.options[select.selectedIndex].value;
我制作了一个包含 <option>
项的列表,每当我尝试使用脚本验证选择了哪一项时,Chrome 中的控制台会显示:
Uncaught TypeError: Cannot read property 'value' of null
我在 HTML 和 JS 中都没有看到我的代码有什么问题,一切似乎都很正常?
这是 HTML:
<select name="part" id="optionFonts">
<option value="default">--- Choose what you want the changes to affect --- </option>
<option value="all"> ALL ELEMENTS </option>
<option value="title-and-headings"> TITLES AND HEADINGS </option>
<option value="headings"> ALL HEADINGS </option>
<option value="allpars"> ALL PARAGRAPHS </option>
<option value="title"> TITLE </option>
<option value="heading1"> FIRST HEADING </option>
<option value="par1"> FIRST PARAGRAPH </option>
<option value="par2"> SECOND PARAGRAPH </option>
<option value="par3"> THIRD PARAGRAPH </option>
<option value="par4"> FOURTH PARAGRAPH </option>
<option value="heading2"> SECOND HEADING </option>
<option value="par5"> FIFTH PARAGRAPH </option>
</select>
而在 JS 中
var optionFonts = document.getElementById('optionFonts');
var title = document.getElementById('stitle');
var div1Title = document.getElementById('d1Title');
var div1Par = document.getElementById('d1Par');
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
var p3 = document.getElementById('p3');
var d2Title = document.getElementById('d2Title');
var d2Par = document.getElementById('d2Par');
function changeTextFontToBebas() {
switch(optionFonts.value) {
case 'all':
title.style.fontFamily = "Bebas";
div1Title.style.fontFamily = "Bebas";
div1Par.style.fontFamily = "Bebas";
p1.style.fontFamily = "Bebas";
p2.style.fontFamily = "Bebas";
p3.style.fontFamily = "Bebas";
d2Title.style.fontFamily = "Bebas";
d2Par.style.fontFamily = "Bebas";
break;
}
}
当我按下有关该字体的框(在本例中为 Bebas 字体)时,它应该会更改所有内容的字体,当我按下它时,它将 运行 function changeTextFontToBebas()
功能也将验证首先检查了什么,但它只是给出了那个错误。
提前致谢
确保在页面上完全加载元素后 select 加载该元素。 "undefined" 通常是在渲染之前读取元素的结果。您的代码未引用函数内的元素,因此它是在脚本 运行 时设置的。如果元素之前的脚本 运行s 在页面上,它将找不到该元素。就像在您进入房间之前有人叫您的名字一样。你不会听到他们的声音。
将脚本放在结束正文标记之前或在文档准备就绪时调用它或 window.onload。
要获取值,引用 select,获取选项,通过 selected 索引引用它。
var select = document.getElementById("optionFonts");
var value = select.options[select.selectedIndex].value;