如何用JS验证<option>的值？

Question

我制作了一个包含 <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() 功能也将验证首先检查了什么，但它只是给出了那个错误。

提前致谢

Answer 1

确保在页面上完全加载元素后 select 加载该元素。 "undefined" 通常是在渲染之前读取元素的结果。您的代码未引用函数内的元素，因此它是在脚本运行时设置的。如果元素之前的脚本运行s 在页面上，它将找不到该元素。就像在您进入房间之前有人叫您的名字一样。你不会听到他们的声音。

将脚本放在结束正文标记之前或在文档准备就绪时调用它或 window.onload。

要获取值，引用 select，获取选项，通过 selected 索引引用它。

var select = document.getElementById("optionFonts");
var value = select.options[select.selectedIndex].value;

如何用JS验证<option>的值？

How to verify value of <option> with JS?

javascript

html

option