Question

我正在尝试使用单选按钮设置输入框中已接受输入的长度。但是，每当我尝试这样做时，我得到'未捕获的TypeError：无法读取属性'已检查'为null'。搜索之后我意识到这是因为JavaScript元素在整个HTML代码运行之前加载。虽然我找不到任何能够加载整个页面的代码，但运行适用于我的JavaScript。

<!DOCTYPE html>
<html lang = 'en'>
<meta charset = 'UTF-8'/>
<head>
    <h2> Credit Card </h2>  
    <script src= 'card.js'></script>
</head>
<body>
    <input type = 'radio' name = 'card' value = 'visa'> Visa </input>
    <input type = 'radio' name = 'card' value = 'mastercard'> Mastercard </input>
    <input type = 'radio' name = 'card' value = 'americanexpress'> American Express </input> <br />
    <input type = 'number' id = 'cardnumber'/> <br />
    <button type = 'button' id = 'confirm' onclick = 'proceed()'> Click to proceed </button>
</body>
</html>

我试过windows.onload，但它对我不起作用。我很可能没有正确使用它。

var cardLength = 0;
if (document.getElementById('visa').checked || document.getElementById('mastercard').checked) {
    cardLength = 16;
} else if (document.getElementById('americanexpress').checked) {
    cardLength = 15;
}

function proceed() {
    var check = document.getElementById('proceed').value;
    if (check == cardLength) {
        alert('Proceed')
    } else {
        alert('Card length invalid')
    }

}

Answer 1

你正试图通过id'visa'，'mastercard'和'americanexpress'来获取元素，但是没有带有这个id的元素。

将ID添加到输入字段，如下面的代码所示。

还尝试在<!DOCTYPE html> <html lang = 'en'> <meta charset = 'UTF-8'/> <head> <h2> Credit Card </h2> </head> <body> <input type = 'radio' name = 'card' value = 'visa' id='visa'> Visa </input> <input type = 'radio' name = 'card' value = 'mastercard' id='mastercard'> Mastercard </input> <input type = 'radio' name = 'card' value = 'americanexpress' id='americanexpress'> American Express </input> <br /> <input type = 'number' id = 'cardnumber'/> <br /> <script src= 'card.js'></script> </body> </html>标记的末尾包含js文件。

<强> HTML

{{1}}

Answer 2

您有多个问题影响了这一点。

1）你是正确的，因为JS是在HTML的其余部分之前加载的。您提到您试图使用window.onload？你能详细说明一下吗？以下代码有效：

window.onload = function() {
    alert(document.querySelector('[name="card"]:checked').value)
}

否则，我强烈建议您将脚本标记放在html的底部，而不是在结束</body>标记之前。这有几个好处：它按照您的意图加载，并且它不会阻止HTML，因此对用户而言，根据最终脚本的大小，它加载速度会稍快。

2）正如lanokvova所说，你没有任何带有“签证”，“万事达卡”或“美国版”的内容的元素。您可以添加ID，也可以使用document.querySelector('[name="card"]:checked')，如上所示。

3）你只在启动时运行一次。如果用户选择其他卡，则不会更新。我建议使用jQuery，因为它非常清晰，但它可以在vanilla JS中完成，如下所示：

document.querySelectorAll('[name="card"]').forEach(function(a) {
    a.addEventListener('change', function() {
        var selected = this.value;

        if(selected === 'visa' || selected === 'mastercard') {
            cardLength = 16;
        } else if(selected === 'americanexpress') {
            cardLength = 15;
        }
    });
});

可以在this Fiddle找到工作演示。您只需要将脚本更新到JS块，然后将标记移动到HTML的末尾。

是的，你不需要关闭<input>标签，<h2>应该进入身体内部，而不是头部。

在javascript运行之前加载整个页面

2 个答案: