我不明白为什么 JS 不收集用户输入

Question

我正在尝试编写一个简单的 Regex Checker 函数，它接受用户输入并根据特定条件对其进行检查。唯一的问题是，我无法将用户输入传递到新变量以开始检查。

谁能帮我理解为什么我在日志中看不到用户输入？我只想能够在控制台中看到用户输入，这样我就可以继续编写我需要的代码。编辑-我知道它现在设置为 ALERT 而不是 console.log-

let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;

function regexChecker () {
    alert(first + last);
};

<!DOCTYPE html>
<html>
<head>
    <title>Regex Checker</title>
</head>
<body>
    <form id='form'>
        <h2>Please enter your first and last name</h2>
        <label for='firstName'>First Name: </label>
        <input type='text' id='firstName'>
        <label for='lastName'>Last Name: </label>
        <input type='text' id='lastName' >
        <button onclick='regexChecker()' type='reset'>Verify Input</button>
    </form>
    <script src='./script.js'></script>
</body>
</html>a

提前致谢。

Answer 1

只需在函数内部分配 first 和 last 的值，因为这两行在页面加载时调用，因此具有 null 或空字符串值。您必须重新分配它们。

function regexChecker () {
    let first = document.getElementById('firstName').value;
    let last = document.getElementById('lastName').value;

    alert(first + last);
};

<!DOCTYPE html>
<html>
<head>
    <title>Regex Checker</title>
</head>
<body>
    <form id='form'>
        <h2>Please enter your first and last name</h2>
        <label for='firstName'>First Name: </label>
        <input type='text' id='firstName'>
        <label for='lastName'>Last Name: </label>
        <input type='text' id='lastName' >
        <button onclick='regexChecker()' type='reset'>Verify Input</button>
    </form>
    <script src='./script.js'></script>
</body>
</html>a

我不明白为什么 JS 不收集用户输入

I can't figure out why JS isn't collecting the user input

user-input