Jump to content

Embarrassing: I'm so rusty I can't code a For Loop

AARRGGHHH

By AARRGGHHH
in JavaScript

 Share

Recommended Posts

AARRGGHHH Newbie

AARRGGHHH

Posted
Posted 
				for (i = 1; i = 5; i++) 
				{
					document.getElementById("" + i + "").style.display = "none"; 
				}

Error: Uncaught TypeError: Cannot read properties of null (reading 'style') 

I'm going to have to write out all 5 lines of code because the loop won't work.  So that this does not happen again, I'd appreciate if someone could tell me what rookie mistake I made.  The quotes don't look right but nothing I tried fixed the error. 

Thank you! 

 

Link to comment
Share on other sites
AARRGGHHH Newbie

AARRGGHHH

Posted
  • Author
Posted
52 minutes ago, Ingolme said:

Just check the tutorial page again: https://www.w3schools.com/js/js_loop_for.asp

This code is trying to access HTML elements. You must make sure that this code doesn't run until after those elements have been loaded, otherwise it won't find them.

I don't recall ever having a problem with that.  Are you saying that this code should be in the <body> and not the <head>? Are the quotes correct? 

Thank you very much

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
background-color: yellow;
}
[id^=demox] {
background-color: lime;
}
</style>

</head>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>
<p id="demox1"></p>
<p id="demox2"></p>
<p id="demox3"></p>
<p id="demox5"></p>
<p id="demox4"></p>
<p id="demox0"></p>
<p id="demox6"></p>
<p id="demox7"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

let text = "";
let text2 = "";
for (let i = 0; i <= 5; i++) {
 //for multiple in single paragraph
 text += cars[i] + " xx<br>";
  
  //single value from set id ref
  var thisDemo = document.getElementById("demox5")
  //multiple values from id and index ref
  //var thisDemo = document.getElementById("demox"+i)
  if(thisDemo){ //if exists
  text2 = cars[i] + " yy";
  thisDemo.innerHTML = text2;
  }
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

First you shouldn't use number at the beginning of id.

Second, you should check if id even exists if looping through index's

Third you should set a value to restrict the for index loop  i < 5; else it will go into a infinite loop with I++;

Link to comment
Share on other sites
AARRGGHHH Newbie

AARRGGHHH

Posted
  • Author
Posted
5 hours ago, dsonesuk said:

Second, you should check if id even exists if looping through index's

I appreciate your reply.  I didn't quite catch what you meant by the above, can I ask you to clarify "looping through index's"? 

In regard to my "syntax error", if I understand correctly, the syntax and quotes are fine, the problem is the placement of the script in the "<head></head> area, correct? 

Thank you very much 

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

The page is read from top to bottom the element/s in this case with id beginning with 'demox' will be a collection, the index will be i 1 to 5 in each loop.

These referred to in javascript must exist for it to be processed in the for loop, so it must be placed after the elements referred too.

Link to comment
Share on other sites
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...