"Cannot set properties of null" error in project

Question

I'm a newbie with js/html, was nearing the completion of this small project when this error showed up after i added the "document.getElementById" tags.

This is the image which shows the error in the console

and the following is the function that im writing and the object that it is referring.

for(const key1 in reservedSeats){
    if(reservedSeats.hasOwnProperty(key1)){

        const obj=reservedSeats[key1];
        console.log(obj.seat)//checking to see if it returns the seat number
    
        document.getElementById(obj.seat).className="r";
        document.getElementById(obj.seat).innerHTML='R';
    }
}

var reservedSeats = {
    record1: {
        seat: "b19",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record2: {
        seat: "b20",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record3: {
        seat: "b21",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record4: {
        seat: "b22",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    }
};

saw multiple stackof saying that the object needs to be above the "getelementbyid" tag, have done that and it still doesn't work.

Please provide a [mre]. There's probably no element with the id you specified. — Unmitigated, Apr 09 '23 at 05:40
Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — mplungjan, Apr 09 '23 at 06:02
Without your code there is nothing we can do but point out the obvious - the error says your code could not find the element. https://stackoverflow.com/questions/how-to-ask, https://stackoverflow.com/help/mcve — Don't Panic, Apr 09 '23 at 06:04
Most likely a duplicate: [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959) — VLAZ, Apr 09 '23 at 07:33

score 0 · Answer 1 · answered Apr 09 '23 at 13:22

You need to declare objects before you can use them (i.e. objects don't hoist).

var reservedSeats = {
    record1: {
        seat: "b19",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record2: {
        seat: "b20",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record3: {
        seat: "b21",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    },
    record4: {
        seat: "b22",
        owner: {
            fname: "Joe",
            lname: "Smith"
        }
    }
};

for(const key1 in reservedSeats) {
        const obj=reservedSeats[key1]; 
        document.getElementById(obj.seat).className="r";
        document.getElementById(obj.seat).innerHTML='R';
}

td {width:20px;height:20px;background-color:green}
.r {background-color:red}

<table>
<tr><td id="a19"></td><td id="a20"></td></tr>
<tr><td id="a21"></td><td id="a22"></td></tr>
<tr><td id="b19"></td><td id="b20"></td></tr>
<tr><td id="b21"></td><td id="b22"></td></tr>
<tr><td id="c19"></td><td id="c20"></td></tr>
<tr><td id="c21"></td><td id="c22"></td></tr>
</table>

"Cannot set properties of null" error in project

1 Answers1