gpt4 book ai didi

javascript - 使用 Javascript 显示 HTML 中的值

转载 作者:行者123 更新时间:2023-12-01 02:14:35 25 4
gpt4 key购买 nike

我正在尝试创建一个具有多个表单的 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 或服务器

最佳答案

  1. 您的代码充满了语法错误:缺少括号、缺少 + 运算符等。

  2. document.writeIn (带有大写的 I)不是函数; document.writeln (带有小写的 L)是。

  3. <script>标签不是自动关闭的,即你必须写 <script src="scriptPage2.js"></script>

  4. document.getElementById('gender')返回null ,因为没有 id="gender" 的元素.

  5. 您正在尝试写入 birthday但你从未声明过该变量。

  6. 我不知道你想用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com