We Keep Coding

Beginner JavaScript for loop

I was wondering if anyone knows the reason for [i-1] in the fourth line when you also have i++ in the second line? Thank you for any help! (It's from the book "JavaScript" by Vodnik and Gosselin.)
if (figureCount === 3) {
for (var i = 1; i < 4; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i - 1];
currentFig.src = filename;
}//end of for loop

It because document.getElementsByTagName returns an HTMLCollection(similar to array) hence. So accessing the 1st(and subsequent) img tag on the page are done through setting i-1

document.getElementsByTagName return a HTMLCollection which is not an array but an array like object. So to access any element from that collection you can pass the index.
document.getElementsByTagName("img")[i - 1] is creating a collection of all the img tags & it is accessing specific element in that collection by passing the index [i-1]
In the below example [1] is trying to access the second element from the collection
var getAllDiv = document.getElementsByTagName('div');
console.log(getAllDiv[1].innerHTML)
<div>1</div>
<div>2</div>

Some developers get confused with the for loop operators logic instead of doing it correctly:
for (var i = 0; i < 3; i++) {
they decided to add some extra processing to the mix ( which isn't that big of a deal ) but iv'e fired developers for less.
CurrentFig is using i - 1 because it appears there is a prepended img element so the developer also chose to select it as well instead of selecting the exact elements that he needs.

How do I use the querySelector?

So I got this code:
Function9() {
x = document.getElementById('BakjeRood');
x.style.opacity=1;
y = document.querySelectorAll("#BakjeBlauw, #BakjeGeel, #BakjePaars, #BakjeRoze, #BakjeWit");
y.style. opacity = 0;
}
If you click the button with function9() the image 'BakjeRood' gets an opacity of 1, but the other images (BakjeBlauw etc.) should then get an opacity of 0 (this structure is the same for all the functions I have on my site. How do I get this second part to work?

In your example, you've illustrated a knowledge of getElementById, which by nature returns a single HTMLElement instance or derivative, whereas querySelectorAll returns an enumerable, list/array-like object, containing all HTMLElement instances that match the query.
var elems = document.querySelectorAll("#x, #z, #z");
for(var index = 0; index < elems.length; index++) {
elems[index].style.opacity = 0;
elems[index].canDoOtherStuffToo();
}

You need to iterate over the results of querySelectorAll - it returns an array-like object (a list of nodes), not a single node.

Javascript getElemtsByClass select [all]

I want to select all elements with the css class
.arrow-down
Sorry but i simply dont find the correct answer, for my problem!
I have an javascript code:
document.getElementsByClassName("arrow-down")[0].style.borderTopColor=""+blu+"";
so how do i select not the first but [all] or is there a way to [1;2;3;]??
getElementsByClassName("arrow-down")[all]
getElementsByClassName("arrow-down")[1;2...]
I tried many things but simply dont get it!
Greetings from germany!

You need to iterate over the list of returned results.
var elements = document.getElementsByClassName("arrow-down");
for (var i = 0, len = elements.length; i < len; i++){
elements[i].style.borderTopColor = blu;
}
If you want to only do a specific subset based on the index, then you can add a condition that checks the value of i. I'm also assuming that blu here is a variable you have defined somewhere?
for (var i = 0, len = elements.length; i < len; i++){
if (i === 1 || i === 2 || i === 3){
elements[i].style.borderTopColor = blu;
}
}
Unfortunately, JavaScript does not have a shorthand for accessing a specific subset of array values, or for applying changes to multiple elements at once. That is something that jQuery does automatically for you. For instance, with jQuery you could write this as:
$('.arrow-down').css('borderTopColor', blu);

document.getElementsByClassName("arrow-down") does select all of such elements.
These are returned in a node list (which can be treated as an array), which is why using [0] on that returns the first element.
Loop over the different elements that the expression returns and act on them:
var elements = document.getElementsByClassName("arrow-down");
var elementsNum = elements.length)
for(var i = 0; i < elementsNum; i++)
{
var anElement = elements[i];
// do something with anElement
}

WIndow.onload() not working on IE to hide table rows

window.onload = function(e){
cells = document.getElementsByName('assetID');
for(j = 0; j < cells.length; j++) cells[j].style.display = 'none';
cellsBMPartNo = document.getElementsByName('BMPartNo');
for(j = 0; j < cellsBMPartNo.length; j++) cellsBMPartNo[j].style.display = 'none';
defaultAssetTableValues();
}
I am simply hiding table rows by name.
See line 2 and 4 .
It works fine in Firefox but does not in IE.
Am I missing something ?

IE does not see elements added to the document dynamically (through the DOM) with getElementsByName. Are your elements created that way?
There are other problems with that method in different versions of IE. As a workaround, you could use getElementsByTagName('td') and then check to see if the name attribute matches the one you are looking for in a for-loop, iterating through the array of elements.
Here's a "IE-fixed" version of getElementsByName:
function getElementsByName2(tag, name) {
var els = document.getElementsByTagName(tag);
var arr = [];
for (var i = 0; i < els.length; i++) {
if (els[i].getAttribute("name") == name) {
arr.push(els[i]);
}
}
return arr;
}
And you would use it like so (for elements in table cells with name 'assetID'):
var cells = getElementsByName2('td', 'assetID');

I think the problem may be that <tr> and <td> elements really don't support a "name" attribute. IE doesn't complain directly, but its "getElementsByName()" function will not pay attention to elements like that.
You might want to use a "class" value instead.

IE could be looking for a name with assetID is you assetID defined in the name attribute?
as the others pointed out the name attribute is't for TD`s
ive noticed you have undeclared variables, cells, j, j, cellsBMPartNo also for one of the j's set one of those to i for example to make it easer to follow as well

how to access element whose id is variable

I need to access elements in html file using javascript, their names are like arr_1, arr_2, arr_3, I wish to use a loop to dynamically create the id then to access them like below:
for(var i=0; i< 10; i++) {
var id = "arr_" + i;
$document.getElementById('id')....
}
But it doesn't work. I remember there is an function to allow me do that, anyone know what that is?

You don't need the dollar sign preceding document, and you should pass your id variable to the getElementById function, not a string containing 'id':
for(var i=0; i< 10; i++) {
var id = "arr_" + i;
var element = document.getElementById(id);
// work with element
}
You might also want to check if getElementById actually found your element before manipulating it, to avoid run-time errors:
if (element) {
element.style.color = '#ff0000';
}

for (var i = 0; i < 10; i++) {
var obj = document.getElementById("arr_" + i);
obj.style.border = "1px solid red";
}

change
$document.getElementById('id')
to
$document.getElementById(id)

Since this question was published and answered quite correctly several times by using document.getElementById(id), another contender has entered the fray, querySelector, which takes any valid CSS selector and returns the first matched element.
Note that because querySelector takes a CSS selector, selecting an ID requires prefixing the ID with #.
for(var i=0; i< 10; i++) {
// Added the # here in the id variable.
var id = "#arr_" + i;
// assuming $document is a reference to window.document in the browser...
var element = $document.querySelector(id);
if (element) {
// do something with element
}
}
getElementById is typically faster than querySelector (in some browsers, twice as fast), which makes sense, since it doesn't have to invoke the CSS subsystem to find the element.
However, the option exists, and Stack Overflow is nothing if not thorough when answering questions.