What kind of javascript code is this? is an array?

JavaScript
#1

function show() {
document.getElementById(‘id1’).style.maxHeight = “600px”;
var images = document.querySelectorAll("#id1 img");
for(var i = 0; i < images.length; i++)
{
images[i].src = images[i].getAttribute(‘data-src’);
}
}

#2

So this function is doing two things: It makes an element (presumably a div or some other container 600px tall, then it is displaying all the images in that element (assuming that they are using the trick of “no src = no show”).

Here’s your same code, commented:

function show() {
  // Find the element with the id, and set its maximum height.
  document.getElementById(‘id1’).style.maxHeight = “600px”;

  // Store a reference to all the images contained within that element.
  //  And you're absolutely right -- this part IS an array.
  var images = document.querySelectorAll("#id1 img");

  for(var i = 0; i < images.length; i++) {
    // Using each image, set its source to the  `data-src` attribute, 
    //  effectively displaying the image. This is simply iterating over
    //  an array of  DOM nodes, and doing something with each one
    //  in turn.
    images[i].src = images[i].getAttribute(‘data-src’);
  }
}

Hope that helps!

#3

thanks so much super useful thanks

#4

Its something I highly recommend – as you start hammering on JS code (or even in CSS), add comments about the bits you know, and as you work out more and more, flesh out the comments.

They’re a great tool for debugging. If I have comments saying “this bit of code does this”, but that isn’t what it does, then when I ask for help, others can see what I was expecting vs. what I got.

And I also tend to code when I’m a little out of my head, so when I come back to it later, I may have NO IDEA what the intent was of a code block. I’ll leave myself notes and comments. Saved my butt more than once. :wink:

#5

thanks this is priceless!!

#6