gpt4 book ai didi

javascript - 为什么函数中的变量没有传递给 HTML 文章?

转载 作者:行者123 更新时间:2023-12-02 23:13:45 27 4
gpt4 key购买 nike

我可以将变量作为警报显示在函数中,但无法将变量传递给文章。我做错了什么?

我知道“a”保存了正确的信息,因为我已经通过警报显示了它。

我尝试使用以下方式传递变量:placeholderContent.recipientName = a;

我尝试在函数外部和内部声明变量,但这也不起作用。

我尝试创建一个嵌套函数来传递变量。

我是 javascript 新手,花了几个小时研究这个并尝试不同的方法,但我无法让它工作。我希望有人能帮助我!

 function validateForm() {           
a = document.forms["inviteForm"]["recipientName"].value;
if (a == "") {
alert("Name must be filled out.");
return false;
}
document.getElementById("recipientName").textContent = a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="pageForm">
<form action="#" Name=inviteForm onsubmit="return validateForm()">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<input type="submit" value="submit" />
</form>
</section>

<article id="placeholderContent">
Hello <span id="recipientName"></span>!
</article>

当用户在表单中输入姓名并单击提交按钮后,变量recipientName 应显示在页面上。

最佳答案

你需要做两件事:

  1. validateForm() 函数末尾返回 false,以便页面不会刷新
  2. 更改您尝试在其中显示数据的 span 元素的 ID。目前,该 id 与 input 元素的 id 冲突。

这是更新后的代码:

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Invite Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>
<section id="pageForm">
<form action="#" Name=inviteForm onsubmit="return validateForm()">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" id="recipientName" placeholder="Enter your Recipient Name" />
<input type="submit" value="submit" />
</form>
</section>

<article id="placeholderContent">
Hello <span id="recipientNameDisplay"></span>!
</article>

<script>
function validateForm() {
a = document.forms["inviteForm"]["recipientName"].value;
if (a == "") {
alert("Name must be filled out.");
return false;
}
document.getElementById("recipientNameDisplay").textContent = a;
return false;
}
</script>

</body>
</html>

关于javascript - 为什么函数中的变量没有传递给 HTML 文章?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57238192/

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