我正在尝试创建一个多页面或多面形式，用户可以填写一些信息，点击“继续”，并获取更多信息以填写。我想要所有这些在网站的一个页面上完成，直到他们准备好提交他们输入的所有信息，所以我使用了一些教程来到达我现在的位置。它是使用css来显示第一个进程，并隐藏其他进程直到“继续”＃39;单击按钮。然后它将隐藏第一个进程并显示第二个进程，依此类推，直到结束。
在第43行，其中显示＆＃39; if（country.length＆gt; 1）{＆＃39;，我收到错误＆＃34;无法读取属性＆＃39;长度＆＃39;未定义＆＃34;来自Google Chrome的开发者工具。就我所知，processPhase1中的所有内容都与processPhase2语法相同。我想我有国家＆＃39;定义它需要的位置...所以我不知所措。
以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Tech Consulting, LLC.">
<link rel="icon" href="../../favicon.ico">
<title>Street Cred</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>
<style>
form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
</style>
<script>
var name, email, phone, place, country, city, state, zip, routing;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
name = _("name").value;
if(name.length > 2){
_("phase1").style.display = "none";
_("phase2").style.display = "block";
_("progressBar").value = 33;
_("status").innerHTML = "Phase 2 of 3";
} else {
alert("Please fill in the fields.");
}
}
function processPhase2(){
country = _("country").value;
if(country.length > 1){
_("phase2").style.display = "none";
_("phase3").style.display = "block";
_("progressBar").value = 66;
_("status").innerHTML = "Phase 3 of 3";
} else {
alert("Please make sure all fields are entered.");
}
}
function processPhase3(){
routing = _("routing").value;
if(routing.length > 0){
_("phase3").style.display = "none";
_("show_all_data").style.display = "block";
_("display_name").innerHTML = name;
_("display_email").innerHTML = email;
_("display_phone").innerHTML = phone;
_("display_country").innerHTML = country;
_("display_routing").innerHTML = routing;
_("progressBar").value = 100;
_("status").innerHTML = "Data Overview";
} else {
alert("Please fill in everything.");
}
}
function submitForm(){
_("multiphase").method = "post";
_("multiphase").action = "insert_form.php";
_("multiphase").submit();
}
</script>
</head>
<body>
<div class="container">
<div class="header clearfix">
<i class="fa fa-chevron-circle-left fa-5x"></i>
<i class="fa fa-chevron-circle-right fa-5x"></i>
<div class="contact-greeting">
<h1>Let's get to know each other.</h1>
<p>Before we can get you the device you want, we need to know a little bit about you.</p>
</div>
</div>
<div class="jumbotron">
<progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
<h3 id="status">Phase 1 of 3</h3>
<form id="multiphase" onsubmit="return false">
<div id="phase1">
<p id="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="First and Last Name" id="name" />
</p>
<p id="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p id="phone">
<input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,100]] feedback-input" id="phone" placeholder="Telephone Number" />
</p>
<button onclick="processPhase1()">Continue</button>
</div>
<div id="phase2">
<p id="country">
<input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
</p>
<p id="place">
<input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="Address" id="place" />
</p>
<p id="city">
<input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="City" id="city" />
</p>
<p id="state">
<input name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="State" id="state" />
</p>
<p id="zip">
<input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="Zip" id="zip" />
</p>
<button onclick="processPhase2()">Continue</button>
</div>
<div id="phase3">
<p id="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Questions or comments..."></textarea>
</p>
<button onclick="processPhase3()">Continue</button>
</div>
<div id="show_all_data">
Name: <span id="display_fname"></span> <br>
E-mail: <span id="display_email"></span> <br>
Phone: <span id="display_phone"></span> <br>
Address: <span id="display_country"></span> <br>
<button onclick="submitForm()">Submit Data</button>
</div>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</div>
<div class="row marketing-contact">
<p></p><br><br><br>
</div>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
答案 0 :(得分：2)
与p标记对应的DOM元素没有value属性。你需要在你的HTML中删除重复的id。如果您从id="country"代码中删除p，则input会找到id="country" document.getElementById processPhase2，nolearn.lasagne将有效。