Нужна помощь в получении и использовании пользовательского ввода с HTML-формой в JavaScript

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

Если вам не нужна форма для отправки, измените кнопку на тип кнопки, добавив type="button" после id = "submit".

Это предотвратит перезагрузку страницы.

Чтобы предотвратить перезагрузку страницы при нажатии 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>