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

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

javascript html

在运行javascript之前加载整个页面,javascript,html,radio-button,Javascript,Html,Radio Button,我试图使用单选按钮在输入框中设置接受输入的长度。然而，每次我尝试这样做时，我都会得到“uncaughttypeerror:cannotreadproperty”checked“of null”。搜索之后，我意识到这是因为JavaScript元素在整个HTML代码运行之前就已经加载了。虽然我找不到任何能够加载整个页面的代码，但是可以运行适合我的JavaScript <!DOCTYPE html> <html lang = 'en'> <meta charset = '

我试图使用单选按钮在输入框中设置接受输入的长度。然而，每次我尝试这样做时，我都会得到“uncaughttypeerror:cannotreadproperty”checked“of 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>

}

您试图通过id“visa”、“万事达卡”和“americanexpress”获取元素，但没有具有此id的元素

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

还可以尝试在

标记的末尾包含js文件

HTML

<!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>


信用卡
签证
万事达卡
美国运通

您有多个问题影响到这一点

1）您是正确的，JS是在HTML的其余部分之前加载的。您提到您试图使用

窗口。onload

？你能具体说明怎么做吗？以下代码起作用：

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

否则，我强烈建议您将脚本标记放在html的底部，正好在结束标记之前。这有两个好处：它按照您的预期加载，并且不会阻止HTML，因此对于用户来说，根据最终脚本的大小，它的加载速度稍微快一点

2）正如lanokvova所说，您没有id为“visa”、“万事达卡”或“americanexpress”的元素。您可以添加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;
        }
    });
});

可以在上找到一个工作演示。您只需要将脚本更新到JS块，并将标记移动到HTML的末尾

顺便说一句，你不需要关闭

标签，而且

应该进入身体内部，而不是头部。

那么价值点是什么？此外，这并不能解决固有的问题实际上，因为您只在提交时使用它进行验证，我只想。在这种情况下，如果你真的想，你可以把它留在头上（但我还是建议把它移到身体的末端）。

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;
        }
    });
});