javascript - 需要帮助在 JavaScript 中通过 HTML 表单获取和使用用户输入

Question

我需要帮助来询问用户输入并将输入保存到变量中以使用它来执行操作。我正在尝试找到一种类似于 Java 使用 Scanner 来请求用户输入的方法。

我想使用输入框供用户输入内容。简单地捕获输入的值对我来说不起作用，因为提交表单后整个页面都会刷新。我也不确定如何在函数范围之外使用包含用户输入的变量，因为当尝试在函数之外使用它时，它会变得未定义。

//html file------------------------------------------
<form id="form1">
    <label for="cardNum">MasterCard Number:</label>
    <input id="cardNum" name="num" type="text" placeholder="Enter a 16-digit number">
    <button onclick="outputnum()" id="submit">Submit</button>
</form>
<h1>Welcome</h1>

//JS FILE--------------------------------------------

function outputnum(){
    var number = document.getElementById("cardNum").value;
    document.querySelector("h1").innerHTML = number;
}

我不想使用提示/警报功能来获取用户输入。我需要从输入框中获取它。

Answer 1

如果不需要提交表单，请在 id="submit"后添加 type="button" 将按钮更改为按钮类型。

这将阻止页面重新加载。

要防止页面在按 Enter 键时重新加载，您可以将此行添加到表单中:

<Input type="submit" hidden disabled>