Как что то написать в Input и после нажатии кнопки перенести в переменную JS?

Question

[Davidka229]

Добрый день, у меня сложилась проблема во время того как я учил JavaScript.
Я захотел сделать форму регистрации, в которой при вводе, все данные сохранялись в переменные в файле Java, для начала я написал вот такой HTML код:

<input type="text" id="username" placeholder="Логин">
    <input type="password" id="password" placeholder="Пароль">
    <input type="password" id="cpassword" placeholder="Повторите пароль">
    <input type="email" id="email" placeholder="Электронный адрес">
    <button id="btn">Регистрация</button>

далее я стал лепить что то в файле Java:

const login = document.getElementById('username')
const password = document.getElementById('password')
const cpassword = document.getElementById('cpassword')
const email = document.getElementById('email')

собственно на этом я и остановился, я понял что для того, чтобы понять, сохранилось ли что то в переменных, или они так и пустеют, например прописать console.log(), но у меня не как это не получалось, подскажите что мне исправить, сделать правильный код, чтобы все работало.

Comments

[Михаил]

Java

на submit формы вешаете функцию, и в ней берёте значения из полей

Answer 1

[n1ksON]

Во-первых, перестаньте путать Java и JavaScript. Это два разных языка.
Теперь по вопросу. Необходимо повесить обработчик события клика на кнопку. Чтобы при клике данные элементов присваивались переменным.
Примерно так:

document.getElementById('button').onclick = function() {
  var a = document.getElementById('input').value
}

Comments

[Davidka229]

Хорошо, прошу прощения.

Я уже сам понял как решить эту задачу, вот:

<input value="" class="c-input-username" placeholder="User name" type="text">
    <input value="" class="c-input-password" placeholder="Password" type="password">
    <input value="" class="c-input-cpassword" placeholder="Confirm password" type="password">
    <input value="" class="c-input-email" placeholder="Email" type="email">
    <button>Registration</button>

let login = document.querySelector('.c-input-username')
let password = document.querySelector('.c-input-password')
let cpassword = document.querySelector('.c-input-cpassword')
let email = document.querySelector('.c-input-email')
let button = document.querySelector('button')

button.onclick = function () {
    // output data to the console

    console.log('Username: ' +login.value)
    console.log('Password: ' +password.value)
    console.log('Confirm password: ' +cpassword.value)
    console.log('Email: ' +email.value)

Все оказалось на много проще чем я предполагал ;)

[n1ksON]

Davidka229, вообще я бы рекомендовал всем элементам формы присвоить один класс и через querySelectorAll получать value всех инпутов циклом

[Davidka229]

n1ksON, ого, а я не подумал об этом, очень хорошая идея.

Спасибо.