请帮忙！我是JavaScript的新手，我完全不明白为什么我的代码没有产生输出。我的任务是接受用户输入到预先建立的表单中。一旦用户单击提交，预先建立的表格将用用户输入替换关键变量。这是我的源代码和js:
代码和js：`
function showFormInput() { //get data from the form
var a1 = document.getElementsById('rname').value;
var b2 = document.getElementsById('orgname').value;
var c3 = document.getElementsById('date').value;
var d4 = document.getElementsById('web').value;
var e5 = document.getElementsById('hname').value;
// Displaying data in the HTML
document.getElementById('recipientName').innerHTML = a1;
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a></li>
<li><a href="invitation.html" class="active">Invitation</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your
Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter
your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your
Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your
Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="showFormInput()" />
</section>
<article id="placeholderContent">
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>在通过linter运行它之后，经过一些修复后似乎可以工作。
几个问题：
-
你指的是
getElementById(而不是getElementsById( -
代码的下半部分被封装在
{}块中(不确定原因(。如果它应该在点击时运行，那么它需要都在同一个块中。 -
评论以两个前斜杠开头：(
//(。
function showFormInput() { //get data from the form
var a1 = document.getElementById('rname').value; // 'rname reference id in html(not included with html you will need to add.)
var b2 = document.getElementById('orgname').value;
var c3 = document.getElementById('date').value;
var d4 = document.getElementById('web').value;
var e5 = document.getElementById('hname').value;
document.getElementById('recipientName').innerHTML = a1; // 'recipientName reference name in the html
document.getElementById('organizationName').innerHTML = b2;
document.getElementById('eventDate').innerHTML = c3;
document.getElementById('websiteURL').innerHTML = d4;
document.getElementById('hostName').innerHTML = e5;
}
document.getElementById('showFormInput').addEventListener('click', showFormInput);
// You can leave this in the <script> tags with an inline `onclick=` if needed (though I wouldn't recommend it). Just easier to edit in the JS.<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span
class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a></li>
<li><a href="invitation.html" class="active">Invitation</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="registration.html">Registration</a></li>
</ul>
</nav>
</header>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="rname" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="orgname" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="web" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="hname" name="hostName" placeholder="Host Name" />
<input type="submit" id='showFormInput' value="Submit" />
</section>
<article id="placeholderContent">
Hello
<span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by
<span id="organizationName">organizationName</span> on
<span id="eventDate">eventDate</span>. Please come to the following
website:
<span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT-FP3215 tasks.</footer>
</body>
</html>