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

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

javascript html

如何获取html输入并使用外部javascript显示它,javascript,html,output,Javascript,Html,Output,我编写了一个相当基本的页面来收集学生信息（名字、姓氏、学期和课程名称）。名字和姓氏是输入type=“text”，学期和课程名称是下拉列表我现在需要使用一个外部JS文件来获取输入中存储的文本，并将它们显示在注册课程下 “名字姓氏已注册参加以下课程：学期：课程：“ 这是我写的html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="vi

我编写了一个相当基本的页面来收集学生信息（名字、姓氏、学期和课程名称）。名字和姓氏是输入type=“text”，学期和课程名称是下拉列表

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

“名字姓氏已注册参加以下课程：学期：课程：“

这是我写的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>

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
}

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

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

如果要从表单本身提取值，请遵循下面的代码。我已经对您的div和select做了一些更改

const form=document.getElementById（'registerForm'）；
form.addEventListener（'submit'，（事件）=>{
event.preventDefault（）；
让full_name=document.getElementById（'fn'）.value+''+document.getElementById（'ln'）.value；
让name=document.getElementsByClassName（'nameOutput'）[0]；
name.innerHTML=full_name+'为以下课程注册'；
设sem=document.getElementById（'sement'）；
val_sem=sem.options[sem.selectedIndex].text；
让学期=document.getElementsByClassName（'semesterOutput'）[0]；
sement.innerHTML=val_sem；
设cls=document.getElementById（'course'）；
val_cls=cls.options[cls.selectedIndex].text；
让classOutput=document.getElementsByClassName（'classOutput'）[0]；
classOutput.innerHTML=val_cls；
});

大学注册制度
学生和课程信息：
名字：
姓氏：
学期：
2019年秋季
2020年春季
课程名称：
CIS 365-业务数据库系统
CIS 425-企业Web技术
登记
注册课程：

<form id="registerForm">
...

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

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

});