如何在另一个 html 文件中使用另一个 html 文件的类和 ID

  • 本文关键字:文件 html 另一个 ID html
  • 更新时间 :
  • 英文 :


那么,我有这个代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Details</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label>Student's Name</label>
<input type="text" placeholder="Enter student's name">
<br><br>
<label>Roll No.</label>
<input type="text" placeholder="Enter student's Roll No.">
<br><br>
<label>Class</label>
<input type="text" placeholder="Enter student's class">
<br><br>
<label>Enter marks for English</label>
<input type="text" placeholder="Marks for English goes here...">
<br><br>
<label>Enter marks for Maths</label>
<input type="text" placeholder="Marks for Maths goes here...">
<br><br>
<label>Enter marks for Science</label>
<input type="text" placeholder="Marks for Science goes here...">
<br><br>
<button>Get your marksheet</button>
</form>
</body>
</html>

假设我给了所有输入一个类或id来标识它们。我做另一个html文件,使表,我希望表的值是相同的输入之一。因此,从技术上讲,我如何在另一个HTML文件中使用一个HTML文件的类和id ?

基本上,当用户提交表单并将其打包到JS对象并将其放入localStorage中时,您希望获得所有输入值。在other.html文件中,检索JS对象并按您想要的方式使用它。

my_html.html

<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script>
let form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
let studentName = document.getElementById('student-name').value;
let studentId = document.getElementById('student-id').value;
let studentObj = {
"name": studentName,
"id": studentId
}
localStorage.setItem("studentObj", JSON.stringify(studentObj));
});
</script>
</head>
<body>
<form id="form">
<label>Student's Name</label>
<input id="student-name" type="text" placeholder="Enter student's name">
<br><br>
<label>Student's ID#</label>
<input id="student-name" type="text" placeholder="Enter student's I.D. No.">
<button type="submit">Submit</button>
</form>
</body>
</html>

other.html

<!DOCTYPE html>
<html>
<head>
<title>other page</title>
<script>
let studentObj = JSON.parse(localStorage.getItem("studentObj"));
console.log(`Name: ${studentObj.name} at ${document.title}`);
</script>
</head>
<body>
<h1>otherPage.html</h1>
</body>
</html>

最新更新