我正在尝试创建一个具有多个表单的 HTML 页面，并且我想要 在同一页面上显示表单中的值(删除原始 HTML)，但使用该按钮后，什么也没有显示(页面就像重新加载一样)
这是 HTML 代码:
function Results() {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var gender = document.getElementById('gender').value;
var date = document.getElementById('birthday').value;
if (document.getElementById('genderM').checked) {
gender = document.getElementById('genderM').value;
} else if (document.getElementById('genderF').checked) {
gender = document.getElementById('genderF').value;
}
document.writeIn("<h3>Thank You! Here's Your Precious Data! </h3>"); document.writeIn("<p> Your Name Is : </p>" + fname + lname); document.writeIn("<p> Gender : " + gender); document.writeIn("<p> Birthday : " + birthday);
document.getElementById('forms').innerHTML = forms;
}<!DOCTYPE HTML>
<html>
<head>
<title> The Page Number 2 </title>
<link rel="stylesheet" type="text/css" href="page2.css">
</head>
<body>
<h1> Please fill in the form for exciting contents! </h1>
<hr size="5px" color="black">
<div id="forms" class="forms">
<form onsubmit="Results()" method="post">
<div class="textFirst">
First Name
</div>
<input id="fname" type="text" name="fname"> <br>
<br>
<div class="textLast">
Last Name <br>
</div>
<input id="lname" type="text" name="lname"> <br>
<br>
<div class="textGender">
Gender <br>
<input id="genderM" type="radio" name="gender" value="male"> Male <br>
<input id="genderF" type="radio" name="gender" value="female"> Female <br>
</div>
<br>
<div class="textBirth">
Birthday <br>
</div>
<input id="birthday" type="date" name="birthday"> <br>
<input id="submit" class="buttonagain" type="submit" value="Submit!" />
</form>
</div>
</body>
</html>有什么想法我应该做什么吗？
编辑:我无法为此使用 php 或服务器
最佳答案
您的代码充满了语法错误:缺少括号、缺少 + 运算符等。
document.writeIn(带有大写的 I)不是函数；document.writeln(带有小写的 L)是。<script>标签不是自动关闭的，即你必须写<script src="scriptPage2.js"></script>document.getElementById('gender')返回null，因为没有id="gender"的元素.您正在尝试写入
birthday但你从未声明过该变量。我不知道你想用
document.getElementById('forms').innerHTML = forms;来实现什么目的？
一般来说，您应该使用浏览器的内置调试器来捕获所有这些错误。如果您使用的是 Chrome 或 Firefox，请按 Ctrl+Shift+I(在 IE 或 Edge 中，按 F12) 并打开“控制台”选项卡；当 JS 解析器遇到错误时，您将看到所有错误。
一旦问题全部解决，请从 <form> 中删除提交事件处理程序。 ，然后像这样更改您的提交按钮:
<input id="submit" class="buttonagain" type="button" onclick="Results()" value="Submit!" />
注意type的变化来自 submit 至 button 。这将阻止页面重新加载，这是提交表单时的预期行为。
关于javascript - 使用 Javascript 显示 HTML 中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49554376/