Блог

Главная - Вопросы по программированию - получить письменный текст в поле ввода HTML в JS

получить письменный текст в поле ввода HTML в JS

#javascript #html #input #text

Вопрос:

У меня есть следующий код в html для простой формы

 <main>
  <form role="form">
    <fieldset id="personal-information" name="personal-information">
      <legend>Personal Information</legend>

      <section class="usernameSection" name="first-name">
        <label for="username">username:*</label>
        <input
          id="username"
          type="text"
          name="textfield"
          placeholder="username"
        />
      </section>
      <br />
      <section class="passwordSection" name="passwordSection">
        <label for="password">password:*</label>
        <input
          id="password"
          type="password"
          name="password"
          placeholder="password"
        />
      </section>
      <section class="submit" name="sumbit">
        <button id="submitButton" type='button' name="submit button"/>Sign in</button>
      </section>
    </fieldset>
  </form>
</main>

и в js у меня есть следующий код:

 function signIn(userName, password) {
  console.log(userName,password)
}

const currentUsername = document.getElementById("username");
const currentPassword = document.getElementById("password");
const submitButton = document.getElementById("submitButton");

submitButton.addEventListener("click", () => {
  signIn(currentUsername.innerText, currentPassword.innerText);
});

Идея состоит в том, чтобы просто ввести имя пользователя и пароль, которые пользователи вводят в это поле, но всякий раз, когда я это делаю, консоль печатает "" ""

Я неправильно получаю ввод с помощью .innerText?

Заранее спасибо

Комментарии:

1. используйте value , а не innerText потому, что вы работаете с элементами формы. signIn(currentUsername.value, currentPassword.value);

Ответ №1:

Вы должны использовать .value вместо .innerText .

 function signIn(userName, password) {
  console.log(userName,password)
}

const currentUsername = document.getElementById("username");
const currentPassword = document.getElementById("password");
const submitButton = document.getElementById("submitButton");

submitButton.addEventListener("click", () => {
  signIn(currentUsername.value, currentPassword.value);
}); 
 <main>
  <form role="form">
    <fieldset id="personal-information" name="personal-information">
      <legend>Personal Information</legend>

      <section class="usernameSection" name="first-name">
        <label for="username">username:*</label>
        <input
          id="username"
          type="text"
          name="textfield"
          placeholder="username"
        />
      </section>
      <br />
      <section class="passwordSection" name="passwordSection">
        <label for="password">password:*</label>
        <input
          id="password"
          type="password"
          name="password"
          placeholder="password"
        />
      </section>
      <section class="submit" name="sumbit">
        <button id="submitButton" type='button' name="submit button"/>Sign in</button>
      </section>
    </fieldset>
  </form>
</main>
Метки: