JavaScript javascript error

[Idle Commander - The Dev]

I have this code all the ids in HTML exist.

const materials = [
    {
        name: 'stone_box',
        amount: stoneAmt
    },
    {
        name: 'redMushSeeds',
        amount: redMushSd
    },
    {
        name: 'cop_box',
        amount: copperAmt
    },
    {
        name: 'iron_box',
        amount: ironAmt
    }
]

for (const material in materials) {
    if (material.amount <= 0) {
        material.amount = 0;
        document.getElementById(material.name).style.display = "none";
    } 
    else {
        document.getElementById(material.name).style.display = 'inline-block';
    }
}

and it gives me an error
script.js:1281 Uncaught TypeError: Cannot read properties of null (reading 'style')

 

[Deleted member 2829]

You claim that "all the ids in HTML exist" but there is evidently no element with the id material.name.

 

[Idle Commander - The Dev]

You claim that "all the ids in HTML exist" but there is evidently no element with the id material.name.

what do you mean?

 

[Deleted member 2829]

I should have been more precise and have written "at least one of the id's stone_box, redMushSeeds, copperAmt, iron_box does not exist". This is what the error message is trying to tell you. Do some debugging to find out which, and correct that.

 

[getdum]

let materials = [ { name: 'stone_box', amount: stoneAmt }, { name: 'redMushSeeds', amount: redMushSd }, { name: 'cop_box', amount: copperAmt }, { name: 'iron_box', amount: ironAmt }];

for (let i = 0; i < materials.length; i++) {
if (materials.amount <= 0) {
materials.amount = 0;
document.getElementById(materials.name).style.display = 'none';
} else {
document.getElementById(materials.name).style.display = 'inline-block';
}
}

try this

 

[Antero360]

let materials = [ { name: 'stone_box', amount: stoneAmt }, { name: 'redMushSeeds', amount: redMushSd }, { name: 'cop_box', amount: copperAmt }, { name: 'iron_box', amount: ironAmt }];

for (let i = 0; i < materials.length; i++) {
if (materials.amount <= 0) {
materials.amount = 0;
document.getElementById(materials.name).style.display = 'none';
} else {
document.getElementById(materials.name).style.display = 'inline-block';
}
}

try this

Unfortunately, this will not work either. You are on the right path, but you are missing a little something: think more of the loop

 

[Deleted member 2829]

You guys are on the right track indeed, and I was wrong. I was assuming that the loop was ok, and thus the error must mean that some id's did not exist. But no, the loop was wrong.

This
for (const material in materials) {
should be
for (material of materials) {

The output of this code

for (const x in materials)
{
    console.log(x);
}
for (y of materials)
{
    console.log(y);
}

shows the difference:

Using a loop counter is of course a possibility too if you want a bit more coding 🙂

 

[Idle Commander - The Dev]

You guys are on the right track indeed, and I was wrong. I was assuming that the loop was ok, and thus the error must mean that some id's did not exist. But no, the loop was wrong.

This
for (const material in materials) {
should be
for (material of materials) {

The output of this code

for (const x in materials)
{
    console.log(x);
}
for (y of materials)
{
    console.log(y);
}

shows the difference:
View attachment 2005
Using a loop counter is of course a possibility too if you want a bit more coding 🙂

though yes this is right BUT you need to put a const or vscode will bug you.

for (const material of materials)

 

[Antero360]

though yes this is right BUT you need to put a const or vscode will bug you.

for (const material of materials)

although that may work, you don't necessarily need to have const in there... in practice, I have seen and used var and let for the for loop parameters. It all depends on the scope of the variable

 

[Deleted member 2829]

In the browser I needed neither var or const to have it work. Although using var would be good practice. I was wondering about the const, because inside the loop you are modifying materials.amount which I though shouldn't be allowed then. Perhaps the const does not extend to members ? Anyway it's solved now, right ?