我可以将变量作为警报显示在函数中，但无法将变量传递给文章。我做错了什么？
我知道“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 应显示在页面上。
最佳答案
你需要做两件事:
- 在
validateForm()函数末尾返回false，以便页面不会刷新 - 更改您尝试在其中显示数据的
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/