I was working on a script for Greasemonkey (FX7) trying to remove certain links and found out that for some reason one that was present in the source, not hidden or constructed by JS, didn't show up in the array that that function returns.
If that one would have been constructed via JS upon running that page it wouldn't wonder me but it's sitting right behind another link that gets found.
So has anyone an idea why this is happening and how I could work around it?
var links = document.getElementsByTagName("a");
for (var l in links){
if (links[l].href == "blah"){ ... }
}
Thats how I was trying to work with them, a bit cut down as I had some more checks to not run into nulls and such.
On a sidenote: I was wondering why that function also returns null entries at all.
Edit: I passed this problem long since I asked for help and found a nice way to do it:
for (var i = 0, l; l = links[i]; i++) { }
This keeps setting l to the current link until there aren't any left. Works nice.
The for...in statement loops through the properties of an object. In this particular case you are iterating over Array object properties. Try to use this script instead:
var links = document.getElementsByTagName("a");
for (var l = 0; l < links.length; l++){
if (links[l].href == "blah"){ ... }
}
var links = document.getElementsByTagName('a');
for (var i=0; i<links.length; i++){
if (links[i].href.match('blah')){...}
};
for … in statements loop through the properties of an object, not only its values, just like #Yuriy said. You'll need to learn some Javascript to understand this (sorry, couldn't find any direct pointer to this part after a few minutes of Googling).
Basically, you need to understand that objects in JS also include “methods”. When you're using a for … in loop, you find an object's values but also its “methods” and other properties.
So, either use #Yuriy's indexed loop… or better, use the hasOwnProperty() method (MDN doc), that allows to avoid the very important caveat #Kolink mentioned.
Your loop should look like:
var links = document.getElementsByTagName('a');
for (var l in links) {
if (! links.hasOwnProperty(l))
continue; // this goes straight to the next property
if (links[l].href == "blah") { ... }
}
getElementsByTagName ("area") [0] returns the value of its href attribute and not HTMLAnchorElement
Related
I've been trying to learn javascript by refactoring some Jquery examples in a book into javascript. In the following code I add a click listener to a tab and make it change to active when the user clicks on the tab.
var tabs = document.querySelectorAll(".tabs a span");
var content = document.querySelectorAll("main .content li");
for (var tabNumber = 0; tabNumber <= 2; tabNumber++) {
tabs[tabNumber].addEventListener("click", function (event) {
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
}
tabs[tabNumber].classList.add("active");
for (var i = 0; i < content.length; i++) {
content[i].innerHTML = "";
}
event.preventDefault();
});
}
This returns an undefined error when I run it. However, I tried replacing tabs[tabNumber].classList.add("active") with this.classList.add("active") and it worked.
Why doesn't the previous code work? As far as I can see they are referring to the same thing, and tabs[tabNumber] should work since at that point in the code it is tabs[0].
If use this, I think it's better and a more polished solution. If you still want to use tabNumber, it's probably evaluating to 3 in every click callback, because it's the number after the last iteration, and you don't have a tabs[3] position.
So, you just have to make a closure of the tabNumber variable.
I guess other answers told you why tabs[tabNumber] does not work (because it comes from the score of the for loop and so, is always equal to the greater value of tabNumber).
That's why I would recommend using a .forEach loop. Careful though because it doesn't work on arrays of DOM nodes produced by document.querySelectorAll(), but you can use:
// ES6
Array.from(document.querySelectorAll('...'))
// ES5
[].slice.call(document.querySelectorAll('...'))
Anyway, I made a simplified working demo of your code.
Note that I save the currently active tab in a variable, to prevent another for loop. You could also do:
document.querySelector('.active').classList.remove('active')
But I like to reduce the amount of DOM reading.
Good luck for your apprentissage, re-writing some jQuery code into Vanilla JS seems like a good method, and you might acquire a far better comprehension of JavaScript.
I have a Javascript Array that holds the contents of a page. In order to draw all the objects in the right places when the page loads I loop over the array and pull out the elements. This worked very well until I allowed the objects to have children within them.
The current array structure is
0-> {elements=[] frame={I keep the frame attributes here with key value pairs}}, 1-> {elements=[] frame={}}
However, I just started adding sub-elements to the elements array in each object. So now I have to loop through/draw each element, check to see if there are any children and if so then I have to draw them too.
The problem I'm having is that after I loop through the first 0 object and it's children the for loop stops running. Is it because I'm calling the same function multiple times? I've done that before so I don't think that's what is happening.
this.run_loop = function (spawn, dom) {
console.log(spawn)
alert(spawn.length)
for (i = 0; i < spawn.length; i++) {
console.log(spawn[i])
//alert("i one")
var newdom = dom + "_" + i;
this.synthesize_elements(spawn[i], dom, newdom)
if (spawn[i].hasOwnProperty('elements')) {
//alert("FOUND")
var newarray = spawn[i]['elements'];
if (newarray.length > 0) {
this.run_loop(newarray, newdom)
}
}
}
}
This is a little old but I encountered a similar issue and found my way here, but I figured it out and thought I'd post the solution if anyone else came across this. The issue in my case (and it looks like in your case as well though I can't be sure) was in the declaration of the for loop:
for (i = 0; i < spawn.length; i++)
You're not declaring that i is a new var. so if anything inside the
this.run_loop(newarray, newdom)
function also manipulates a counter variable called i that isn't declared a new var, it will also change the one in your outer scope, and kick you out of the loop if it goes over the length of spawn
just always declare:
for (var i; i< spawn.length; i++)
in your loops or make sure your counters are unique.
One of my colleague suggested me to use jQuery .each() function over javascript for loop to traverse through DOM elements on my page, I am not a newbie in jQuery, but never understood the real reason behind why developers tend to use .each() over for loop of javascript. Can anyone explain it to me?
If you want to iterate using a for loop, you have to increment the index:
for(var i=0; i<arr.length; ++i) {
and then you have to get the actual value using the index:
var value = arr[i];
.each does both of these for you and passes the values into a function:
$(...).each(function(i, value) {
// actual interesting part of the loop...
});
It simply saves you the boilerplate code of incrementing the index and getting the value at that index.
The variables defined in an .each function are also closed over (i.e., within a closure), so the equivalent code (considering looping and variable closure, plus setting this, as well as breaking on a false return value) might be something like:
(function() {
for(var i=0; i<arr.length; ++i) {
var ret = (function(index, value) {
// actual interesting part of the loop...
}).call(arr[i], i, arr[i]);
if(ret === false) break;
}
})();
which is quite a bit more to type.
In terms of execution performance, .each is (unsurprisingly) slower than a raw for loop, because it does much more than a raw for loop.
Its very easy to use
But it is slow as shown in this test result.
http://jsperf.com/jquery-each-vs-for-loop/214
Because it is easier & cleaner to do
$jqExpr.each(function(i, el){
/* YOUR CODE */
});
than
for(var i=0; i < $jqQExpr.length; i++){
el = $jqExp[i];
/* YOUR CODE */
}
It's slower, but more expressive (shorter) and it also sets up closures. Also, on jQuery collections it integrates well into chaining; while for plain arrays I would suggest using the native .forEach method.
There is also, for me, an important benefit closure side effect if you use each instead of for.
Consider the code below (I'm using coffeescript as I'm found of..) which alerts on all links with its href value:
$("a").each (i, e)->
href = $(e).attr('href')
$(e).on "click" alert(href)
If you "translate" it into a simple for loop like :
for e in $("a")
href = $(e).attr('href')
$(e).on "click" alert(href)
This code won't work as the href variable is not enclosed in a closure...
I am currently building a small web application with similar functionality across all modules. I want to code small generic functions so that all programmers next to me, call these functions and these functions return necessary but important data for them to implement their functionality. In this example, I am trying to deal with the typical "choose true or false" exercise. So from the template.php they call this function:
function checkAnswers(){
var radiobuttons = document.form1.exer1;
var correctAnswers = answers(); //this is an array of string
var checkedAnswers = checkExerciseRB(radiobuttons, 2, correctAnswers);
for(i=0; i<checkedAnswers.length; i++){
alert(checkedAnswers[i]);
}
}
Function checkExerciseRB is my generic function, it is called from checkAnswers.
function checkExerciseRB(rbuttons, opciones, correct){
var answers = new Array();
var control = 0;
for(i=0; i<rbuttons.length; i++){
var noPick="true";
for(j=0; j<opciones; j++){
if(rbuttons[control+j].checked){
if(rbuttons[control+j].value==correct[i]){
answers[i]= 1;
noPick="false";
break;
}
else{
answers[i]=2;
noPick="false";
break;
}
}
}
if(noPick=="true")
answers[i]=0;
control=control+opciones;
}
return answers;
}
It works great but while looking at my favorite browsers (FireFox, Chrome) error log it says:
TypeError: rbuttons[control + j] is undefined
Any clue on how to deal with this matter?
This probably means that control + j is greater than or equal to the length of the array rbuttons. There's no such array element as rbuttons[control + j].
You should learn how to use the JavaScript debugger in your favorite browsers! Debuggers are great. They let you watch this code run, line by line, as fast or as slow as you want, and watch how the value of control changes as you go.
You’ll watch it, and you’ll think “Oh! That line of code is wrong!”
You're looping through rbuttons.length times, but in each loop you're adding 2 to control. Using control to index your array, you're going to run past the end.
Does the index specified by control + j exist in the array? i.e: If that evaluates to 4, is there at least 5 items in the array?
Also, you should be using var i, var j, etc inside your for loop. Without it your variables are leaking into the scope this code is executed in (most likely the global scope, and that's not good) :)
What is the best way to add the additional path information to each javascript object? Like "assets/img/upload/" before each jpg name? That I have url="assets/img/upload/02.jpg" etc.? That would be great help!
My data right now:
[Object { url="02.jpg"},
Object { url="03.jpg"},
Object { url="09.jpg"},
Object { url="04.jpg"},
Object { url="5.jpg"}
...]
A simple for loop:
for(var i = 0; i < array.length; i++)
{
array[i].url = "assets/img/upload/" + array[i].url;
}
Suppose your array of objects is called MyArray:
for (var i = 0, LoopTimes = MyArray.length; i < LoopTimes; i++) {
MyArray[i].url = "assets/img/upload/" + MyArray[i].url;
}
Note that:
a) the opening curly brace goes on the same line as the for statement. See Crokfod on Javascript The Good Parts on youtube for the explanation. In javascript, putting the opening brace on the next line can create some weird bugs that are hard to detect.
b) I cache the length of MyArray in LoopTimes so that I don't have to evaluate the length of the array at every iteration.
If you are only going to be running this code in a modern browser, you could always consider using the map method of the Array object.
Assuming your array of objects is called "array"
array.map(function(item) {return item.url = "assets/img/upload/" + item.url;});
This runs the anonymous function, that takes an "item" in the array, and returns the modified url field, over each element of the array.
If you need your code to run on older browsers, stick with the for loops suggested by the other contributors.