如何获取 html 输入并使用外部 javascript 显示它答案

【问题标题】：How to take html input and display it using external javascript如何获取 html 输入并使用外部 javascript 显示它
【发布时间】：2019-09-12 18:19:17
【问题描述】：

我编写了一个非常基本的页面来收集学生信息（名字、姓氏、学期和课程名称）。名字和姓氏是 input type="text"s，学期和课程名称是下拉列表。

我现在需要使用外部 JS 文件来获取存储在输入中的文本并在注册课程下显示为

"First Name Last Name 已注册以下课程：学期：课程：”

这是我写的html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>University Registration</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <header>
      <div class="headerContainer">
       <h1>University Registration System</h1>
      </div>
    </header>

    <form action="" method="get" class="scInfo">

      <h3>Student and Course Info:</h3>

      <div class="fn">
        <p>First Name: </p>
        <input type="text" name="fn" id="fn" required>
      </div>

      <div class="ln">
        <p>Last Name: </p>
        <input type="text" name="ln" id="ln" required>
      </div>

      <div></div>

      <div class="semester">
        <p>Semester: </p>
        <select>
          <option value="fall">Fall 2019</option>
          <option value="spring">Spring 2020</option>
        </select>
      </div>

      <div class="course">
        <p>Course Name: </p>
        <select>
          <option value="365">CIS 365 - Business Database Systems</option>
          <option value="425">CIS 425 - Enterprise Web Technologies</option>
        </select>
      </div>

      <div class="button">
        <button id="register">Register</button>
      </div>
    </form>

    <h3>Registered Course:</h3>

    <div class="nameOutput">

    </div>

    <div class="semesterOutput">

    </div>

    <div class="classOutput">

    </div>

    <script src="script.js"></script>
  </body>
</html>

这是我写的css代码

header h1
{
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid black;
}

form .fn
{
  display: inline-block;
  padding: 5px;
}

form .ln
{
  display: inline-block;
  padding: 5px;
}

form .semester
{
  display: inline-block;
  padding: 5px;
}

form .course
{
  display: inline-block;
  padding: 5px;
}

form .button
{
  padding: 5px
}

【问题讨论】：

标签： javascript html output

【解决方案1】：

无需显示 CSS 文件，因为它与此处无关。这完全取决于您使用的后端，因为您需要先让用户注册成功，然后再将任何内容输出到屏幕上。

一种方法是，如果您使用的是后端 API（您还需要 POST 方法，而不是 GET）：

<form id="registerForm">
...

<input type="submit" value="registerBtn" name="Register" role="button" id="registerBtn">Register Now</button>

在您的 javascript 文件中，您可以使用事件处理程序来获取数据，将其发送到您的后端 API 以注册用户，如果您获得 200 状态代码或任何等效的成功代码，您可以将信息显示回来给用户

在您的 javascript 文件中：

const registerForm = document.querySelector("#registerForm")
registerForm.addEventListener("submit", (e) => {
   e.preventDefault(); //prevent form from resetting the page
   // grab the input values, and use a request package like axios or javascript's native xmlhttprequest to send the data

});

【讨论】：

【解决方案2】：

如果您想从表单本身中提取值，请按照以下代码操作。我对您的 div 和 select 进行了一些更改。

const form = document.getElementById('registerForm');
form.addEventListener('submit', (event) => {
  event.preventDefault();

  let full_name = document.getElementById('fn').value + ' ' +     document.getElementById('ln').value;
  let name = document.getElementsByClassName('nameOutput')[0];
  name.innerHTML = full_name + 'is registered for the following course';

  let sem = document.getElementById('semester');
  val_sem = sem.options[sem.selectedIndex].text;
  let semester = document.getElementsByClassName('semesterOutput')[0];
  semester.innerHTML = val_sem;

  let cls = document.getElementById('course');
  val_cls = cls.options[cls.selectedIndex].text;
  let classOutput = document.getElementsByClassName('classOutput')[0];
  classOutput.innerHTML = val_cls;
});

    <header>
      <div class="headerContainer">
       <h1>University Registration System</h1>
      </div>
    </header>

    <form action="" method="get" class="scInfo" id="registerForm">

      <h3>Student and Course Info:</h3>

      <div class="fn">
        <p>First Name: </p>
        <input type="text" name="fn" id="fn" required>
      </div>

      <div class="ln">
        <p>Last Name: </p>
        <input type="text" name="ln" id="ln" required>
      </div>

      <div></div>

      <div class="semester">
        <p>Semester: </p>
        <select id="semester">
          <option value="fall">Fall 2019</option>
          <option value="spring">Spring 2020</option>
        </select>
      </div>

      <div class="course">
        <p>Course Name: </p>
        <select id="course">
          <option value="365">CIS 365 - Business Database Systems</option>
          <option value="425">CIS 425 - Enterprise Web Technologies</option>
        </select>
      </div>

      <div class="button">
        <button id="register">Register</button>
      </div>
    </form>

    <h3>Registered Course:</h3>

    <div class="nameOutput">
    </div>

    <div class="semesterOutput">

    </div>

    <div class="classOutput">

    </div>

我无法在代码 sn-p 中插入外部 js。但是您可以将下面的 js 复制到一个文件中，然后像在上面的代码中一样调用该文件。

提交表单时会显示输出。有更好的方法可以做到这一点，但这是实现它的基本方法，如果您是新手，这也将使您对选择器有所了解. 确保你通过 js 代码。

希望对你有帮助

谢谢

【讨论】：