需要幫助獲取和使用 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>