I'm trying to target a list of elements using a for loop:
for(var i = 1; i < 5; ++i){
console.log(i)
target[i].classList.remove('redText')
anchor[i].classList.remove('redText')
}
The expected result is:
target1.classList.remove('redText')
anchor1.classList.remove('redText')
target2.classList.remove('redText')
anchor2.classList.remove('redText')
....etc.
in the console I get
ReferenceError: target is not defined
Which means the index is not being appended to target and anchor.
Is this possible to accomplish?
This is what you're looking for:
for(var i = 1; i < 5; ++i){
console.log(i)
document.getElementById('target' + i).classList.remove('redText')
document.getElementById('anchor' + i).classList.remove('redText')
}
Fiddle.
Related
I am trying to debug my code.
When I add console.log('aaa'); it shows ok in the test output
When I add console.log statements within a for loop however
console.log('aaa');
for(let i = 0; i++; i < 10) {
console.log(i);
}
I get the 'aaa' as output but I do not get the numbers in the loop.
The for loop should have the check before the increment
for(let i = 0; i < 10; i++)
^ ^
switch these
This is a javascript function inside of a HTML tag, however - when I move the alert(currentalbum) below the for loop, the second alert does not run - only the first, why?
function populatetracks(albumvalue) {
var currentalbum = albumvalue;
alert(currentalbum); // #1
document.getElementById("TracksList").options.length = 0;
for(i = 0; albums[albumvalue].tracks.length - 1; i++) {
var s = document.getElementById('TracksList');
var opt = document.createElement('option');
opt.appendChild( document.createTextNode(albums[albumvalue].tracks[i].title));
opt.value = i;
s.appendChild(opt);
}
alert(currentalbum); // #2
}
'#1' does produce an alert, but '#2' doesn't.
As noted, not sure how your for loop is supposed to stop.
This has no evaluation in it, just an incrementor
for(i=0; albums[albumvalue].tracks.length -1; i++){
Maybe try this (might need to change '=' to '<=' )
for(i=0; i < albums[albumvalue].tracks.length -1; i++){
I have a problem in my code:
var row = ["1","2","3","4","5"];
var column = ["1","2","3","4","5"];
var arrayLength = row.length;
var arrayLength2 = column.length;
for (var i = 0; i < arrayLength; i++) {
for (var e = 0; e < arrayLength2; e++) {
var samples = document.querySelectorAll('[data-row-id="'+row[i]+'"][data-column-id="'+column[e]+'"]');
for(var i = 0; i < samples.length; i++) {
var sample = samples[i];
sample.setAttribute('data-sample-id', row);
console.log("Colore cambiato");
}
}
}
When i run it, the cycle lasts infinitely and the console.log is called up a lots of times
Where is the error? Thanks!
The problem is that your inner-most loop uses the same i looping variable as your outer most loop and it's constantly changing i so that the outer loop never finishes.
Change the variable on your inner loop to a different identifier that you aren't already using in the same scope.
Youre using same loop i twice nested so it runs infinitely coz it always resets i in inner loop
use something else instead like k
for(var k = 0; k < samples.length; k++) {
var sample = samples[k];
sample.setAttribute('data-sample-id', row);
console.log("Colore cambiato");
}
If I have variables and a for loop with a condition set-up like this:
var scores = [23, 53, 85];
var arrayLength = scores.length;
var i;
for(i = 0; i < arrayLength; i++)
Does the i refer to the scores array indexed position of 0, or is i just the counter number, which is set to 0?
I'm kinda confused on understanding what's happening.
Any help is appreciated!
Here you can see it in action:
var scores = [23, 53, 85];
var arrayLength = scores.length;
var i;
for(i = 0; i < arrayLength; i++) {
console.log('i = ' + i + ', scores[i] = ' + scores[i]);
}
console.log('End of for loop: i = ' + i);
One important thing to understand is that i will be incremented until the condition i < arrayLength is not met anymore. So it will reach the value 3 but the for loop will end immediately. Therefore, the code inside the loop is not executed for i = 3.
i is just a counter number which is initially set to 0 and increments up to arrayLength (3 in this case)
i just refers to a number that (in this case) counts up from 0 until arrayLength. You have to explicitly access the values in the array at each i by using scores[i], after which you can modify/use the value in any way you see fit.
i is the counter number.
A for loop works like so:
For each value of array length, use i as a counter variable
each time through the loop increment the variable of i when you are done (i++)
you could expand it like so...
for(i = 0; i < arrayLength; i++)
{
console.log('position ' + i + ' is ' + scores[i]);
}//now that I am done, increment i and go through again until i is no longer less than array length
Right so you have the set the i as a variable by initially going
var i;
Within the for statement you have set the i variable to 0.
for(i = 0; i < arrayLength; i++){
}
Then the for statement is saying if i is less than the array length run the for statement. Each time the for statement runs you are adding 1 to i because of i++;
Every time the for statement will check to see if i is less than the arrayLength if it isnt it will exit out of the for.
So for this instance the for each would run 3 times because the array length is 3.
Make sure you have open and closing brackets on the for statement
So your for statement should look like this.
for(i = 0; i < arrayLength; i++){
}
I am trying to create many droppable elements inside a loop. Here is the code:
for (var i = 0; i < 10; i++) {
for(var j = 0; j < 20; j++){
$("#main").append( '<a "href="javascript:void(0);" id="click'+i+'-'+j+'" onclick="change_to_blocked('+i+','+j+')"><img id="image'+i+'-'+j+'" src="http://localhost/free.png" />');
$("#main").append('');
tmp1 = i;
tmp2 = j;
$('#image'+i+'-'+j).droppable({
drop: function(e,ui) {
$('#image'+(i)+'-'+(j)).attr('src','/bot.png');
console.log(i);
}
});
}
$("#main").append('<br>'); }
However, it only applies to the last value of the loop.
You need to create a closure otherwise at the time the events occur the values of i and j will be the values of the last iteration of the loop.
One way is to wrap the code within loop in an IIFE - Immediately Invoked Function Expression
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 20; j++) {
(function (i, j) {
$("#main").append('<a "href="javascript:void(0);" onclick="return showIndexes('+i +','+j+')">Item # '+i+'-'+j+'</a><br>');
})(i, j); //params used in the IIFE
}
}
By passing the values as arguments of the function they are closed in the function and won't be changed by subsequent iterations
Some of the html rendering was left out for clarity
When looping over arrays with jQuery, you can create a closure by using $.each which will provide you the index as first argument of the callback
DEMO