I'm having a few issues and I think it is because of the way I'm declaring an array. I'm using jQuery and I want to declare a global array so I can use its items inside my functions. The way I'm doing it now, when I do try to use the items in a function, they are limited. I did a console log of the array and it seems to show that it has stuff in it (even the stuff that I want) but then when I perform jQuery functions on those items it tells me
Cannot read property 'top' of undefined
Additionally, I've not used arrays much in JS, just in C++, so perhaps there's an issue with my syntax? Here is a rough copy of the code I have:
var pigs = new Array();
pigs[0] = $('#foo');
pigs[1] = $('#bar');
$(document).ready(function(){
console.log(pigs);
var topCoord = pigs[0].offset().top;
});
I guess $('#foo') and $('#bar') both return empty jQuery objects. You should wait for the DOM to be ready before querying it :
var pigs = new Array();
$(document).ready(function(){
pigs[0] = $('#foo');
pigs[1] = $('#bar');
console.log(pigs);
var topCoord = pigs[0].offset().top;
});
Related
I've got five of the same scripts that just use five different variables. #video0 to #video4. I'm just not quite sure on how to combine them all so I don't have redundant code. I've been trying to make them all variables
var video= [
$('#video0'),
$('#video1'),
$('#video2'),
$('#video3'),
$('#video4')
];
http://jsfiddle.net/cwfybnzr/
Use each() with the array
var videos = [
$('#video0'),
$('#video1'),
$('#video2'),
$('#video3'),
$('#video4')
];
$(function() {
$.each(videos, function(){
var iframe = $(this)[0];
...
});
});
Isn't it better to create class for those elements? Then it will be possible to iterate through them using simple jQuery syntax: $('.video'). Plus it would not require changing any JavaScript code when new videos will be added.
You can add a class element like videoCSS to all the elements and then loop through them like
$('.videoCSS').each(function(){
var player = $(this);
// your code here
});
This way you can future proof you js code as you can add as many new player/iframes to the HTML with videoCSS class and your js code will still be the same.
Also, I found that in your code you are doing like
var iframe = $('#video0')[0];
var player = $(iframe);
Which means that first you are getting a jquery object using $('#video0'), then you are trying to get a DOM element out of it like $('#video0')[0] and then again you are converting it to a jquery object using $(iframe).
I think there is no need of this much extra processing, you can simply use
var player = $('#video0');
or using my updated code like
var player = $(this);
UPDATED FIDDLE
When I use JavaScript it works.
var submitButton = document.getElementById("submitButton");
When I use jQuery to declare it it doesn't.
var submitButton = $('#submitButton');
I realized when debugging, jQuery is creating a object for the variable.
submitButton: Object[span#submitButton.wordButtonD]
In JavaScript
submitButton: span#submitButton.wordButtonD
How do get this to be like javaScript??
I think what you are looking for is: submitButton[0]
Just remember to check the length (greater than 0) because jQuery will return a result even though the element has not been found.
Just use Javascript and the result will be as you want. jQuery create its own object to control :). Or please explain more why do you need the result span#submitButton.wordButtonD but not Object[span#submitButton.wordButtonD]?
statement 1:
var submitButton1 = document.getElementById("submitButton");
statement 2:
var submitButton2 = $('#submitButton');
In above statements, submitButton1 is a DOM object and submitButton2 is a Jquery Object (which already warped your DOM object). Thus, If you want to get Dom object from Jquery object, just do:
var submitButton3 = submitButton2[0]
OR
var submitButton3= submitButton2.get(0)
Now, 2 Dom object submitButton1 and submitButton3 are the same.
We can create an array in a couple of ways:
var myArray = new Array();
Or:
var myArray = [];
The second way is safer to use than the new Array() syntax, because the Array constructor can be overwritten and potentially replaced with malicious code.
I have seen above lines in many JavaScript books but I don't understand how an Array constructor can be overwritten and replaced with malicious code? I'm looking for an example of how someone can do it, so that I can understand the reality of the issue.
Somewhere in the code above:
Array.prototype.forEach = function (e){
console.log("something wrong there");
return(e);
};
Somewhere in the code below:
var i = [1,2,3,4,5];
i.forEach(function(e){
console.log(e);
});
Output:
>"something wrong there"
As you can see, there is no difference how to initialize array variable. var i = []; just shorter notation.
If you write on your JS console :
[1,2,3]
(just like that) - you can do nothing with it.
Well that's not accurate with old browsers.
You could overload the array ctor by :
Array = new function (){... }
and so , when you got your friend list via Json ( not jsonp) : -
someone could use an XSS/XSF attack and steal your friends list.
The thing ere is the fact that : if you write [1,2,3] - there is actually a ctor working here.
So if you got to a website which does array response - he could still your list.
i have two arrays defined like these
var theory= new Array();
var first;
var second;
function arrTheory () {
this.first= first;
this.second= second;
}
var subject= new Array();
...
function arrSubject () {
...
this.theory= theory;
...
}
how can i access to the elements in the theory array inside the bigger one?
I've tried
subject[0].theory.first;
but it doesn't work while
subject[0].name;
which is another field of the big array works fine. what i've missed?
I think the point is, you have an array with element as "obj" and added to another array.
So to access to a you could try
subject[0].theory[0].first;
I mean access to element of array by index and them access to the element of the object.
Ok, I have a good guess given the information you've provided.
theory in subject[0].theory is an array, right? How come you are using it like subject[0].theory.first? You should use an indexer like subject[0].theory[0].
In the code you showed us (before any potential edits), you don't add anything to the var theory= new Array();
Also beware to make sure that this is what you really expect. In JavaScript, the context of this changes depending on context of the caller and that's confusing sometimes.
subject[0].theory[0].first;
try that.
Using this in arrTheory() and arrSubject() will cause a syntax error because they are functions not objects and you need rather to set those properties to theory and subject arrays instead so you must use the correspondent array name instead of this like following:
var theory= new Array();
var first = "first";
var second = "second";
function arrTheory () {
theory.first= first;
theory.second= second;
}
var subject= new Array();
function arrSubject () {
subject.theory= theory;
}
arrTheory();
arrSubject();
alert(subject.theory.first + " / " + subject.theory.second);
then you can access first and second properties like this:
subject.theory.first
subject.theory.second
in the code above property name is not set in subject, if it's already set in the original code you can call it like this:
subject.name
jsfiddle
I want to create a new variable in javascript but it's name should made of a stale part and a variable one like this:
tab_counter = 1;
var editor + tab_counter = blabla
well i want the new variable name to be in this case editor1, is this possible?
You cannot create a stand-alone variable name that way (except as a global) (edit or except with eval()), but you can create an object property:
var tab_counter = 1;
var someObject = {};
someObject['editor' + tab_counter] = "bla bla";
You can create globals as "window" properties like that, but you probably shouldn't because global variables make kittens cry.
(Now, if you're really just indexing by an increasing counter, you might consider just using an array.)
edit also see #Birey's somewhat disturbing but completely correct observation that you can use "eval()" to do what you want.
It is possible
var tab_counter=1;
eval("var editor"+tab_counter+"='blah'")
alert(editor1);
eval("var editor"+tab_counter+1+";")
editor2='blahblah';
alert(editor2);
http://jsfiddle.net/5ZLYe/
You can do the eval method used by Birey or you can create a custom property of an object such as...
obj[editor + tab_counter] = blabla;
But it sounds like you're going about doing whatever you're doing in a particularly horrible way. If you just want to store multiple items which you can index into use an array...
var array = [];
array[0] = blabla;
array[1] = blabla2;
alert(array[0]); //shows value of blabla
alert(array[1]); //shows value of blabla2
It seems like you may want to consider using a Dictionary for something like this. This link which references this link describes your options there.