很难弄清楚为什么我的计划不会发布结果。任何援助将不胜感激。编程和HTML / javascript仍然是新手。我无法弄清楚为什么结果不会真正起作用。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Rummage it All</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/homework.css" type="text/css"
media="screen">
</head>
<!--Navigation to different links and parts of the website-->
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">CS240</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Rummage Items</a>
<a class="dropdown-item" href="#">Unique Items</a>
<a class="dropdown-item" href="#">Love that Ink Pen Company</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Who we are</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Our Vision</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="../pages/home.html">Home</a>
<a class="dropdown-item" href="../pages/week1-1.html">Week 1-1</a>
<a class="dropdown-item" href="../pages/week1-2.html">Week 1-2</a>
<a class="dropdown-item" href="../pages/week2-1.html">Week 2-1</a>
<a class="dropdown-item" href="../pages/week2-2.html">Week 2-2</a>
<a class="dropdown-item" href="../pages/week3-1.html">Week 3-1</a>
<a class="dropdown-item" href="../pages/week3-2.html">Week 3-2</a>
<a class="dropdown-item" href="../pages/week4-1.html">Week 4-1</a>
<a class="dropdown-item" href="../pages/week4-2.html">Week 4-2</a>
<a class="dropdown-item" href="../pages/week5-1.html">Week 5-1</a>
<a class="dropdown-item" href="../pages/week5-2.html">Week 5-2</a>
<a class="dropdown-item" href="../pages/week6-1.html">Week 6-1</a>
<a class="dropdown-item" href="../pages/week6-2.html">Week 6-2</a>
<a class="dropdown-item" href="../pages/week7-1.html">Week 7-1</a>
<a class="dropdown-item" href="../pages/week7-2.html">Week 7-2</a>
<a class="dropdown-item" href="../pages/week8-1.html">Week 8-1</a>
<a class="dropdown-item" href="../pages/week8-2.html">Week 8-2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"></button>
</form>
</div>
</nav>
<main role="main">
<!--Main jumbotron-->
<div class="jumbotron">
<div class="container-fluid">
<h1 class="display-3">Registration</h1>
<p>Please fill out the information</p>
<blockquote class="blockquote text-center">
<p class="mb-0">"Rummage through it all!"</p>
<footer class="blockquote-footer">Someone Awesome <cite title="Source Title"></cite></footer>
</blockquote>
</div>
<!--Card to display a logo-->
<div class="card" style="width: 18rem; color:black">
<img class="card-img-top" src="../images/registration.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Register Today!</p>
</div>
</div>
</div>
<form style="background:url(../images/Backgroundcontainer.png)">
<div class="container-fluid">
<h1>Registration Form</h1>
<ul>
<li>
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" size="30" placeholder="Minimum 10 characters long" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="user_name" id="name" size="50" placeholder="Firstname, LastName Mi" />
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="user_address" id="address" size="50" />
</li>
<li>
<label for="city">City:</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li>
<label for="state">State:</label>
<input type="text" name="state" id="state" size="30" />
</li>
<li>
<label for="zip">Zip code:</label>
<input type="number" name="zip" id="zip" size="7" />
</li>
<li>
<label for="phone">Phone Number:</label>
<input type="number" name="phone" id="phone" size="15" />
</li>
<li>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" size="25" placeholder="youremail@gmail.com" />
</li>
<li>
<label for="birthday">Your Birthday</label>
<input type="date" name="birthday" id="birthday" size="20" />
</li>
<li>
<label for="favoritecolor">Choose your favorite Color:</label>
<input type="color" name="color" id="favoritecolor" size="10" />
</li>
<li>
<label for="country">Country:</label>
<select name="country">
<option selected="" value="Default">(Please choose a country)</option>
<option value="JA">Japan</option>
<option value="AU">Australia</option>
<option value="US">United States</option>
<option value="GM">Germany</option>
<option value="AF">Africa</option>
<option value="RU">Russia</option>
<option value="IT">Italy</option>
</select>
</li>
<li>
<label for="rumNum">Number of Rummage Sales Attended</label>
<input type="number" name="rumsale" id="rumNum" size="7" />
</li>
</ul>
<div class="Ebay">
<h6> Do you use Ebay to sell your items?</h6>
<label for="yes">Yes</label>
<input type="radio" name="radio-1" id="yes">
<label for="no">No</label>
<input type="radio" name="radio-1" id="no">
</div>
<div class="payment">
<h6>Select a Form of Payment:</h6>
<label for="paypal">Paypal</label>
<input type="radio" name="radio-3" id="paypal">
<label for="CC">Credit Card</label>
<input type="radio" name="radio-3" id="CC">
<label for="Check">Check</label>
<input type="radio" name="radio-3" id="Check">
<label for="Cash">Cash</label>
<input type="radio" name="radio-3" id="Cash">
</div>
<div>
<div class="favRum">
<h6>Favorite Rummage Items:</h6>
<input type="checkbox" name="Fish" value="Fish">Fish Tanks
<input type="checkbox" name="Dresser" value="Dresser">Dressers
<input type="checkbox" name="Lamp" value="Lamp">Lamps
<input type="checkbox" name="Boots" value="Boots">Boots
</div><br />
<input type="hidden" id="mySecret" value="Classified" />
<button id="output" type="button">Submit Form</button>
<input id="btnReset" type="reset" value="Clear form" /><br /><br />
</div>
</div>
</form>
<div id="results"></div>
<hr>
</main>
<!-- Footer Information -->
<footer class="container-fluid">
<div class="row">
<div class="col-md-4">
<p>© Copyright data</p>
</div>
<div class="col-md-4">
<p>Contact info</p>
</div>
<div class="col-md-4">
<p>About Us</p>
</div>
</div>
</footer>
<div id="result"></div>
<script>
function registrationform() {
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var city = document.getElementById("city").value;
var zip = document.getElementById("zip").value;
var state = document.getElementById("state").value;
var country = document.getElementById("country").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var favoritecolor = document.getElementById("favoritecolor").value;
var birthday = document.getElementById("birthday").value;
var rumSale = document.getElementById("rumSale").value;
var mySecret = document.getElementById("mySecret").value;
var ebay = "";
var Yes = document.getElementById("Yes").checked;
var No = document.getElementById("No").checked;
if (Yes) {
ebay
= document.getElementById("Yes").value;
}
if (No) {
Ebay = document.getElementById("No").value;
}
var payment = "";
var Paypal = document.getElementById("paypal").checked;
var Credit = document.getElementById("CC").checked;
var Cash = document.getElementById("Cash").checked;
var Check = document.getElementById("Check").checked;
if (Paypal) {
payment = document.getElementById("paypal").value;
}
else if (Credit) {
payment = document.getElementById("CC").value;
}
else if (Cash) {
payment = document.getElementById("cash").value;
}
else if (Check) {
payment = document.getElementById("check").value;
}
var fish = document.getElementById("fish").checked;
var dresser = document.getElementById("dresser").checked;
var boots = document.getElementById("boots").checked;
var lamp = document.getElementById("lamp").checked
var favRum = "";
if (fish) {
favRum += document.getElementById("fish").value + " ";
}
if (dresser) {
favRum += document.getElementById("dresser").value + " ";
}
if (boots) {
favRum += document.getElementById("boots").value;
}
if (lamp) {
favRum += document.getElementById("lamp").value;
}
}
//Output
var welcome = 'Welcome: ' + name + "<br />"
'Address: ' + address + ", " + city + state + ", " + country + " " + zip + "<br />"
'Phone Number: ' + phone + "<br />"
'Email Address: ' + email + "<br />"
'Password: ' + pass + "<br />" + "<h3>Preferences</h3>"
'Favorite Color: ' + favoritecolor + "<br />"
'Date of Birth: ' + birthday + "<br />"
'Number of Rummage Sales attended: ' + rumSale + "<br />"
'My secret code word is: ' + mySecret + "<br />"
'Do you sell on Ebay? ' + ebay + "<br />"
'Preferred Payment method: ' + payment + "<br />"
'Favorite Rummage: ' + favRum;
document.getElementById('result').innerHTML = welcome
document.getElementById('output').addEventListener('click', registrationform);
</script>
非常感谢任何帮助。我是各种编码的新手。谢谢。
答案 0 :(得分：0)
你的HTML中有很多拼写错误。有几个元素没有id（name不足以使用document.getElementById方法），例如：＆＃34; country＆＃34;，＆＃34; rumSale＆＃34;，＆ ＃34; fish＆＃34;，＆＃34; dresser＆＃34;，＆＃34; lamp＆＃34;，＆＃34; boots＆＃34;，＆＃34;结果＆＃34;键入错误为＆＃34;结果＆＃34; ...
另请注意，id区分大小写，＆＃34;是＆＃34;不同于是，＆＃39;。
在关闭函数括号welcome之前需要定义代码末尾的} var语句，并且在每行的末尾需要+符号。 document.getElementById('results').innerHTML = welcome;行也必须移动到函数内部。 （似乎你已经定义了两次结果，我删除了最后一个页脚）
以下是您更正的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/homework.css" type="text/css" media="screen">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">CS240</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Rummage Items</a>
<a class="dropdown-item" href="#">Unique Items</a>
<a class="dropdown-item" href="#">Love that Ink Pen Company</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Who we are</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Our Vision</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="../pages/home.html">Home</a>
<a class="dropdown-item" href="../pages/week1-1.html">Week 1-1</a>
<a class="dropdown-item" href="../pages/week1-2.html">Week 1-2</a>
<a class="dropdown-item" href="../pages/week2-1.html">Week 2-1</a>
<a class="dropdown-item" href="../pages/week2-2.html">Week 2-2</a>
<a class="dropdown-item" href="../pages/week3-1.html">Week 3-1</a>
<a class="dropdown-item" href="../pages/week3-2.html">Week 3-2</a>
<a class="dropdown-item" href="../pages/week4-1.html">Week 4-1</a>
<a class="dropdown-item" href="../pages/week4-2.html">Week 4-2</a>
<a class="dropdown-item" href="../pages/week5-1.html">Week 5-1</a>
<a class="dropdown-item" href="../pages/week5-2.html">Week 5-2</a>
<a class="dropdown-item" href="../pages/week6-1.html">Week 6-1</a>
<a class="dropdown-item" href="../pages/week6-2.html">Week 6-2</a>
<a class="dropdown-item" href="../pages/week7-1.html">Week 7-1</a>
<a class="dropdown-item" href="../pages/week7-2.html">Week 7-2</a>
<a class="dropdown-item" href="../pages/week8-1.html">Week 8-1</a>
<a class="dropdown-item" href="../pages/week8-2.html">Week 8-2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"></button>
</form>
</div>
</nav>
<main role="main">
<!--Main jumbotron-->
<div class="jumbotron">
<div class="container-fluid">
<h1 class="display-3">Registration</h1>
<p>Please fill out the information</p>
<blockquote class="blockquote text-center">
<p class="mb-0">"Rummage through it all!"</p>
<footer class="blockquote-footer">Someone Awesome <cite title="Source Title"></cite></footer>
</blockquote>
</div>
<!--Card to display a logo-->
<div class="card" style="width: 18rem; color:black">
<img class="card-img-top" src="../images/registration.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Register Today!</p>
</div>
</div>
</div>
<form style="background:url(../images/Backgroundcontainer.png)">
<div class="container-fluid">
<h1>Registration Form</h1>
<ul>
<li>
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" size="30" placeholder="Minimum 10 characters long" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="user_name" id="name" size="50" placeholder="Firstname, LastName Mi" />
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="user_address" id="address" size="50" />
</li>
<li>
<label for="city">City:</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li>
<label for="state">State:</label>
<input type="text" name="state" id="state" size="30" />
</li>
<li>
<label for="zip">Zip code:</label>
<input type="number" name="zip" id="zip" size="7" />
</li>
<li>
<label for="phone">Phone Number:</label>
<input type="number" name="phone" id="phone" size="15" />
</li>
<li>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" size="25" placeholder="youremail@gmail.com" />
</li>
<li>
<label for="birthday">Your Birthday</label>
<input type="date" name="birthday" id="birthday" size="20" />
</li>
<li>
<label for="favoritecolor">Choose your favorite Color:</label>
<input type="color" name="color" id="favoritecolor" size="10" />
</li>
<li>
<label for="country">Country:</label>
<select id="country" name="country">
<option selected="" value="Default">(Please choose a country)</option>
<option value="JA">Japan</option>
<option value="AU">Australia</option>
<option value="US">United States</option>
<option value="GM">Germany</option>
<option value="AF">Africa</option>
<option value="RU">Russia</option>
<option value="IT">Italy</option>
</select>
</li>
<li>
<label for="rumSale">Number of Rummage Sales Attended</label>
<input type="number" name="rumSale" id="rumSale" size="7" />
</li>
</ul>
<div class="Ebay">
<h6> Do you use Ebay to sell your items?</h6>
<label for="yes">Yes</label>
<input type="radio" name="radio-1" id="yes">
<label for="no">No</label>
<input type="radio" name="radio-1" id="no">
</div>
<div class="payment">
<h6>Select a Form of Payment:</h6>
<label for="paypal">Paypal</label>
<input type="radio" name="radio-3" id="Paypal">
<label for="CC">Credit Card</label>
<input type="radio" name="radio-3" id="CC">
<label for="Check">Check</label>
<input type="radio" name="radio-3" id="Check">
<label for="Cash">Cash</label>
<input type="radio" name="radio-3" id="Cash">
</div>
<div>
<div class="favRum">
<h6>Favorite Rummage Items:</h6>
<input type="checkbox" name="Fish" id="fish" value="Fish">Fish Tanks
<input type="checkbox" name="Dresser" id="dresser" value="Dresser">Dressers
<input type="checkbox" name="Lamp" id="lamp" value="Lamp">Lamps
<input type="checkbox" name="Boots" id="boots" value="Boots">Boots
</div><br />
<input type="hidden" id="mySecret" value="Classified" />
<button id="output" type="button">Submit Form</button>
<input id="btnReset" type="reset" value="Clear form" /><br /><br />
</div>
</div>
</form>
<div id="results" style="border:2px solid red;">***results</div>
<hr>
</main>
<!-- Footer Information -->
<footer class="container-fluid">
<div class="row">
<div class="col-md-4">
<p>© Copyright data</p>
</div>
<div class="col-md-4">
<p>Contact info</p>
</div>
<div class="col-md-4">
<p>About Us</p>
</div>
</div>
</footer>
<div id="result"></div>
<script type="text/javascript">
function registrationform() {
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var city = document.getElementById("city").value;
var zip = document.getElementById("zip").value;
var state = document.getElementById("state").value;
var country = document.getElementById("country").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var favoritecolor = document.getElementById("favoritecolor").value;
var birthday = document.getElementById("birthday").value;
var rumSale = document.getElementById("rumSale").value;
var mySecret = document.getElementById("mySecret").value;
var ebay = "";
var Yes = document.getElementById("yes").checked;
var No = document.getElementById("no").checked;
if (Yes) {
ebay = "Yes";
}
if (No) {
ebay = "No";
}
var payment = "";
var Paypal = document.getElementById("Paypal").checked;
var Credit = document.getElementById("CC").checked;
var Cash = document.getElementById("Cash").checked;
var Check = document.getElementById("Check").checked;
payment = (Paypal ? "Paypal" : Credit ? "CC" : Cash ? "Cash" : Check ? "Check" : "");
/*if (Paypal) {
payment = "Paypal";
}
else if (Credit) {
payment = "CC";
}
else if (Cash) {
payment = "Cash";
}
else if (Check) {
payment = "Check";
}*/
var fish = document.getElementById("fish").checked;
var dresser = document.getElementById("dresser").checked;
var boots = document.getElementById("boots").checked;
var lamp = document.getElementById("lamp").checked
var favRum = "";
if (fish) {
favRum += document.getElementById("fish").value + " ";
}
if (dresser) {
favRum += document.getElementById("dresser").value + " ";
}
if (boots) {
favRum += document.getElementById("boots").value;
}
if (lamp) {
favRum += document.getElementById("lamp").value;
}
//Output
var welcome = 'Welcome: ' + name + "<br />" +
'Address: ' + address + ", " + city + state + ", " + country + " " + zip + "<br />" +
'Phone Number: ' + phone + "<br />" +
'Email Address: ' + email + "<br />" +
'Password: ' + pass + "<br />" + "<h3>Preferences</h3>" +
'Favorite Color: ' + favoritecolor + "<br />" +
'Date of Birth: ' + birthday + "<br />" +
'Number of Rummage Sales attended: ' + rumSale + "<br />" +
'My secret code word is: ' + mySecret + "<br />" +
'Do you sell on Ebay? ' + ebay + "<br />" +
'Preferred Payment method: ' + payment + "<br />" +
'Favorite Rummage: ' + favRum;
document.getElementById('results').innerHTML = welcome;
} //end of function
document.getElementById('output').addEventListener('click', registrationform);
</script>
另一个注意事项：您可以使用jquery document.getElementById代替$('#id')，或者定义一个简单的函数来更轻松地访问这几个元素。
//instead of these:
//var name = document.getElementById("name").value;
//var address = document.getElementById("address").value;
//var city = document.getElementById("city").value;
//...
//you can use jquery `$('#id')` or define a simple function eg:
function getId(id) { return document.getElementById(id); }
var name = getId("name").value; //or: $("#name").val();
var address = getId("address").value;
var city = getId("city").value;
...