javascript - 无法通过下拉表单将值传递给 JavaScript 变量 - 错误 : "Uncaught TypeError: Cannot read property ' value' of null"

Question

我的 HTML 中有一个输入表单元素，它将一个值传递给函数以初始化游戏板。但是我收到“Uncaught TypeError: Cannot read property 'value' of null”错误。

这是我的表单元素:

<form>
    Difficulty<br>
    <select id="size">
        <option value='3'>Easy</option>
        <option value='4' selected>Normal</option>
        <option value='5'>Hard</option>
        <option value='6'>Extra Hard</option>
    </select>
</form>

以及相应的JavaScript:

function initBoard() {
    var difficulty = document.querySelector('size').value
    var board = {}
    board.cells = []
    for (var i = 0; i < difficulty; i++) {
        for (var j = 0; j < difficulty; j++) {
            board.cells.push({ row: i, col: j, isMine: (Math.random() >= 0.7), isMarked: false, hidden: true })
        }
    }
    return board
}

我不明白为什么变量为空。

Answer 1

您的querySelector正在尝试引用名为size的id，因此您需要正确引用CSS选择器(哈希符号):

var difficulty = document.querySelector('#size').value

w3schools page on querySelector 给出了一些不同选择器类型匹配的示例。