Question

我一直在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页面。所有标记都是bootstrap。

<?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>

Answer 1

id“早餐”没有元素。只有name的{{1}}设置为该值。

input

更新您的元素，使其具有Breakfast: <input type="text" name="breakfast" size="4" maxlength="4"/>。

id="breakfast"

Javascript：无法读取null的属性值

1 个答案: