-1
我一直收到错误“无法读取null属性值”在我的JavaScript。原本为变量赋值的元素值，当错误发生在：Javascript：无法读取属性值null
var breakCal = document.getElementById("breakfast").value;
我把作业条件语句中，并试图改变这里这些元素的CSS属性时，现在我收到的错误：
if(passBreakCal == false){ document.getElementById("breakfast").style.borderColor="red"; }
有没有人有任何建议？
function verifyDailySum2(){
if(document.getElementById("breakfast") !== null){
var breakCal = document.getElementById("breakfast").value;
}
else{
var breakCal = null;
}
if (document.getElementById("lunch") !== null) {
var lunchCal = document.getElementById("lunch").value;
}
else{
var lunchCal = null;
}
if (document.getElementById("dinner") !== null) {
var dinnerCal = document.getElementById("dinner").value;
}
else {
var dinnerCal = null;
}
if(document.getElementById("snack") !== null){
var snackCal = document.getElementById("snack").value;
}
else{
var snackCal = null;
}
if(document.getElementById("weight") !== null){
var weight = document.getElementById("weight").value;
}
else{
var weight = null;
}
alert(breakCal + "$" + lunchCal + "$" + dinnerCal + "$" + snackCal + "$" + weight);
var pattern = /^[0-9]+$/;
var passBreakCal = pattern.test(breakCal);
var passLunchCal = pattern.test(lunchCal);
var passDinnerCal = pattern.test(dinnerCal);
var passSnackCal = pattern.test(snackCal);
var passWeight = pattern.test(weight);
if(passBreakCal == false || passLunchCal == false || passDinnerCal == false ||
+ passSnackCal == false || passWeight == false){
alert("One of the fields is empty. Or contains characters other than numbers");
if(passBreakCal == false){
document.getElementById("breakfast").style.borderColor="red";
}
if(passLunchCal == false){
document.getElementById("lunch").style.borderColor="red";
}
if(passDinnerCal == false){
document.getElementById("dinner").style.borderColor="red";
}
if(passSnackCal == false){
document.getElementById("snack").style.borderColor="red";
}
if(passWeight == false){
document.getElementById("weight").style.borderColor="red";
}
return false;
}
else{
return true;
}
}
这里是调用函数的PHP页面。所有标记都是引导程序。
<?php
include('session.php');
include('header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Workout Daily Summary </title>
<link href = "bootstrap-theme.css" rel = "stylesheet" type ="text/css"/>
<link href = "bootstrap.css" rel = "stylesheet" type ="text/css"/>
<link href = "is448_project.css" rel = "stylesheet" type ="text/css"/>
<link href = "bootstrap.min.css" rel = "stylesheet" type ="text/css"/>
<script type="text/javascript" src="dailySum.js"></script>
</head>
<body>
<div class = "row">
<div class = "col-sm-4">
<div class = "border">
<h3> Daily Summary: </h3>
<p>
Please list calories consumed for each meal today:
</p>
<form action = "dailySumTable.php" method="post">
Breakfast: <input type = "text" name = "breakfast" size = "4" maxlength = "4"/>
<br/> <br/>
Lunch: <input type = "text" name = "lunch" size = "4" maxlength = "4"/>
<br/> <br/>
Dinner: <input type = "text" name = "dinner" size = "4" maxlength = "4"/>
<br/> <br/>
Snack: <input type = "text" name = "snack" size = "4" maxlength = "4"/>
<br/> <br/>
Activities Completed Today:<br/>
<select name = "activity">
<option value="Running">Running</option>
<option value="Walking">Walking</option>
<option value="Weight_Lifting">Weight Lifting</option>
<option value="Swimming">Swimming</option>
<option value="Biking">Biking</option>
<option value="Yoga">Yoga</option>
</select> Time (in minutes): <input type = "text" name = "time1" size = "4" maxlength = "4"/><br/><br/>
<select name = "activity2">
<option value="Biking">Biking</option>
<option value="Running">Running</option>
<option value="Walking">Walking</option>
<option value="Weight_Lifting">Weight Lifting</option>
<option value="Swimming">Swimming</option>
<option value="Yoga">Yoga</option>
</select> Time (in minutes): <input type = "text" name = "time2" size = "4" maxlength = "4"/><br/><br/>
<select name = "activity3">
<option value="Weight_Lifting">Weight Lifting</option>
<option value="Running">Running</option>
<option value="Walking">Walking</option>
<option value="Swimming">Swimming</option>
<option value="Biking">Biking</option>
<option value="Yoga">Yoga</option>
</select> Time (in minutes): <input type = "text" name = "time3" size = "4" maxlength = "4"/><br/><br/>
<select name = "activity4">
<option value="Swimming">Swimming</option>
<option value="Running">Running</option>
<option value="Walking">Walking</option>
<option value="Weight_Lifting">Weight Lifting</option>
<option value="Biking">Biking</option>
<option value="Yoga">Yoga</option>
</select> Time (in minutes): <input type = "text" name = "time4" size = "4" maxlength = "4"/><br/><br/>
<select name = "activity5">
<option value="Other">Other</option>
<option value="Swimming">Swimming</option>
<option value="Running">Running</option>
<option value="Walking">Walking</option>
<option value="Weight_Lifting">Weight Lifting</option>
<option value="Biking">Biking</option>
<option value="Yoga">Yoga</option>
</select> Time (in minutes): <input type = "text" name = "time5" size = "4" maxlength = "4"/><br/> <br/>
Daily Weigh in: <br/> <br/>
Weight:<input type = "text" name = "weight" size = "4" maxlength = "4"/>
<br/>
<input type = "reset" value = "Clear" />
<input type = "submit" value = "Submit" onclick = "return verifyDailySum2()" />
</form>
</div>
</div>
<div class = "col-sm-7"> <img class = "curls" src="salad.jpg" alt ="salad"/> </div>
</div>
</body>
</html>
链接的jsfiddle请，也可以添加标记过 – TrojanMorse
，你可以做一个小提琴（http://jsfiddle.net），所以我们可以看到在行动 –
错误你检查speling？ – deamentiaemundi