如何用 JS 验证 <option> 的值？ [复制]

Question

我列出了一个包含<option> 项目的列表，每当我尝试使用脚本验证选择了哪个项目时，Chrome 中的控制台都会显示：

未捕获的类型错误：无法读取 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

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

将脚本放在结束 body 标记之前，或在 document ready 或 window.onload 上调用它。

要获取值，请引用选择，获取选项，通过所选索引引用它。

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