需要帮助获取和使用 JavaScript 中的 HTML 形式的用户输入

Question

我需要帮助来询问用户输入并将输入保存到变量中以使用它。 我试图找到一种类似于 Java 使用 Scanner 来询问用户输入的方法。

我想使用一个输入框让用户输入他们的输入。 简单地捕获输入的值对我不起作用，因为一旦提交表单，整个页面就会刷新。 我也不确定如何在 function scope 之外使用包含用户输入的变量，因为当尝试在 ZC1C425268E68385D1AB5074C17A94F1 之外使用它时它变得未定义。

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

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

Answer 1

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

这将防止页面重新加载。

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

<Input type="submit" hidden disabled>

Answer 2

下面是一个基本示例，它将阻止提交的默认操作。 如果您有任何问题，请告诉我：）

 var submitEl = document.getElementById('submitting'); var inputValueEl = document.getElementById('cardNum'); // Add a event listener to the submit button and prevent the form submit submitEl.addEventListener('click', function(event) { // preventDefault() will prevent the submit, which will cause the page to refresh event.preventDefault(); // validate credit card number validateCard(inputValueEl.value); }); function validateCard(num) { // Do stuff with the num value here. alert(num); }

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