在 JS 的 HTML 输入字段中获取书面文本答案

【问题标题】：get written text in HTML input field in JS在 JS 的 HTML 输入字段中获取书面文本
【发布时间】：2021-09-20 03:48:54
【问题描述】：

我在 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 输入错误？

提前致谢

【问题讨论】：

使用value 而不是innerText，因为您正在使用表单元素。 signIn(currentUsername.value, currentPassword.value);

标签： javascript html input text

【解决方案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>

【讨论】：