Question

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

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为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()功能，这也将验证什么是＆＃39; s先检查过，但它只是给出了错误。

提前致谢

Answer 1

确保在元素在页面上完全加载后选择元素。＆＃34;未定义＆＃34;通常是在渲染元素之前读取元素的结果。您的代码未引用函数内部的元素，因此在运行脚本时正在设置它。如果脚本在元素位于页面之前运行，则它将找不到该元素。就像有人在你进入房间之前打电话给你的名字一样。你不会听到它们。

将脚本放在关闭正文标记之前，或者在文档就绪或window.onload上调用它。

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

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

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

1 个答案: