javascript - HTMLElement focus()方法未捕获的TypeError

我遇到了一个我觉得很奇怪的问题，尽管我仍在学习javascript。我只想在设置状态值时才进行一些计算，如果未设置状态，则希望表单字段集中显示。

现在的问题是下面的代码不起作用

document.getElementById('cart-hplus').addEventListener('submit', estimateTotal);

function estimateTotal(event) {
    event.preventDefault();

    var state = document.getElementById('s-state').value;
    if (state === '') {
        alert("Please choose your preferred shipping state.");

        state.focus();
    }
}

但这有效，但我认为声明变量然后在if语句中再次使用document对象不是一个好习惯

function estimateTotal(event) {
    event.preventDefault();

    var state = document.getElementById('s-state').value;
    if (state === '') {
        alert("Please choose your preferred shipping state.");

        document.getElementById('s-state').focus();
    }
}

第一个代码有什么问题？

最佳答案

您没有在状态输入控件和状态值之间进行区分。您将需要使用2个变量:

function estimateTotal(event) {
    event.preventDefault();
    var state = document.getElementById('s-state');
    var stateValue = state.value;
    if (stateValue === '') {
        alert("Please choose your preferred shipping state.");
        state.focus();
    }
}

另外，您拥有的方式也不错。两次引用该对象没有错。