[英]I can't figure out why I'm getting the “Cannot read property 'length' of undefined” error here
我正在尝试创建一个多页或多阶段表单，在该表单中，用户填写了几条信息，单击“继续”，然后获取了更多信息。我希望所有这些都在网站的一页上完成，直到他们已经准备好提交他们输入的所有信息，因此我使用了一些教程来了解自己的位置。 使用CSS完成显示第一个过程，然后隐藏其他过程，直到单击“继续”按钮为止。 然后它将隐藏第一个进程并显示第二个进程，依此类推直到最后。
在第43行，显示“ if（country.length> 1）{”的地方，我从Google Chrome开发人员工具中收到错误消息“无法读取未定义的属性'length'of undefined”。 据我所知，processPhase1中的所有内容与语法上的processPhase2相同。 我想我已经定义了“国家/地区”的位置...所以我很茫然。
这是代码：
<!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>
与p标签相对应的DOM元素没有value属性。 您需要摆脱HTML中重复的ID。 如果从p标记中删除id="country" ，则将通过document.getElementById找到id="country"的input ，并且processPhase2将起作用。
无法弄清楚为什么我得到“无法读取未定义的属性'0'”错误
[英]Can't figure out why I'm Getting “Cannot read property '0' of undefined” Error
我不断收到错误：TypeError Cannot read property 'getContext' of null 并且不知道为什么
[英]I keep getting the error: TypeError Cannot read property 'getContext' of null and can't figure out why
谁能解释为什么我在Javascript中遇到此错误？ [无法读取未定义的属性'length']
[英]Can anyone explain why I am getting this error in Javascript? [Cannot read property 'length' of undefined]
在 JS 中迭代我的数组，但出现“无法读取未定义的属性‘长度’”错误
[英]Iterating on my array in JS but I'm getting a "Cannot read property 'length' of undefined" error
我不断收到“未捕获的TypeError：无法读取null的属性'value'”响应，并且无法弄清原因
[英]I am continually getting a 'Uncaught TypeError: Cannot read property 'value' of null' response and can't figure out why
为什么我收到“ TypeError：无法读取未定义的属性” length”
[英]Why am I getting 'TypeError: Cannot read property 'length' of undefined'
为什么我得到这个“无法读取未定义的属性”长度”？ （JavaScript）
[英]Why am I getting this 'cannot read property 'length' of undefined'? (JavaScript)
为什么我在HTMLUListElement收到错误“无法读取未定义的属性'classList'”，这是为什么。 <anonymous> ”
[英]Why is it that I'm getting the error “Cannot read property 'classList' of undefined at HTMLUListElement.<anonymous>”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.