Confusion about onclick function - javascript

Beginner JS here, hope anyone could explain this to me.
1) Why does this not work:
var allSpans = document.getElementsByTagName('span');
allSpans.onclick = function() {
alert('hoo');
};
2) or if I have all the innerHTML from spans in an array and I try this:
var allSpans = document.getElementsByTagName('span');
var arrayNumbers = [];
for (var i = 0; i < allSpans.length; i++) {
var operator = allSpans[i].innerHTML;
}
arrayNumbers.onclick = function() {
alert('hoo');
};

onclick is a property of HTMLElementNode objects. getElementsByTagName returns a NodeList. Assigning a property to a NodeList doesn't assign it to every member of that list.
Exactly the same, except you are dealing with an Array instead of a NodeList.

You have to iterate through the returned list
var allSpans = document.getElementsByTagName('span');
for ( var i = 0; i < allSpans.length; i += 1 ) {
allSpans[i].onclick = function (event) {
alert('hoo');
};
}

To answer your first question, you have to add this on each node instead of the nodeList, which is what you're getting when you call document.getElementsByTagName. What you're looking for is:
for(var i = 0; i < allSpans.length; i++){
allSpans[i].onClick = function(){
alert('hoo');
};
}
You have a similar issue in the second question, except it doesn't appear as if you're actually adding anything to the arrayNumbers array, so even if you looped through that, you wouldn't get the expect events on click.

Related

Declare and fill in the an array with the for loop

I want to create an array using a for loop in JavaScript. I want my array to be consisted of 10 variables or more (var kaunt1, var kaunt2, etc...) which will be actually numbers from div tags.
I tried this code below, but it isn't working??? Am I missing something?
var arr = [];
for(var i=1; i<=10; i++) {
var kaunt[i] = parseInt(document.getElementById("A"+i).innerHTML, 10);
}
var kaunt[i] = ... isn't how you add an index to an array, that's a syntax error.
Just use kaunt[i] = ....
You're declaring arr, but using kaunt? Not sure what that's about, but you should normalize that if they're meant to be the same thing.
Anyway, use kaunt.push(parseInt(document.getElementById("A"+i).innerHTML, 10)); (no var) inside your for.
Other's beat me I think, but this should do it...
var kaunt = new Array();
for(var i=1; i<=2; i++) {
kaunt[i] = parseInt(document.getElementById("A"+i).innerHTML, 10);
}
Get rid of the var in front of kaunt[i].
kaunt[i] = ....

Can't set the value of input with Javascript

I'm trying to change the value of an input field with Javascript.
I tried everything, but nothing seems to works. I tried putting the 5 between quotation marks and using jquery. I also double-checked the array and everything.
Here is the input code:
<input type="number" id="id_[SOME_ID_HERE]" value="0">
and the loop used to update the values.
for (var i = 0; i < shoppingCart.length; i++) {
var val = shoppingCart[i];
document.getElementById("id_" + val.substring(3)).value = 5;
}
jsfiddle: http://jsfiddle.net/zkTud/
EDIT: Seems like it doesn't work with type="text" as well...
EDIT2: Thank you everyone who answered. My problem was actually something else.
The input was loaded from another page, and it took time and the for loop I had problem with (see above) was executed before the file was done loading.
All I did was to move the for loop as is to the callback function and it works now.
Thanks anyways!
I really appreciate the help I'm getting in this site! :)
The problem is that your call to substring is returning too much of the string, so there are no elements found by getElementById. Change it to this:
for(var i = 0; i < shoppingCart.length; i++) {
var val = shoppingCart[i];
document.getElementById("id_" + val.substring(5)).value = 5;
}
Here's an updated fiddle.
The substring method (when called with one argument) returns the characters from the index specified to the end of the string. Since you are specifying index 3, you get "d_1", "d_2" etc. when actually you just want the number.
Alternatively, you could of course change the string to which you append the substring, but I think that would be more confusing to read (not immediately obvious which element will be returned):
document.getElementById("i" + val.substring(3)).value = 5;
demo http://jsfiddle.net/bY4EV/6/
sustring(3) gives d_1 : How to substring in jquery
hope this helps
code
var shoppingCart = new Array();
shoppingCart[0] = "prod_1";
shoppingCart[1] = "prod_3";
shoppingCart[2] = "prod_2";
for(var i = 0; i < shoppingCart.length; i++) {
var val = shoppingCart[i];
$("#id_" + val.substring(5)).val("5");
}
​
Check this, JSFiddle , Updated and corrected your problem.
Code:
var shoppingCart = new Array();
shoppingCart[0] = "prod_1";
shoppingCart[1] = "prod_3";
shoppingCart[2] = "prod_2";
for(var i = 0; i < shoppingCart.length; i++) {
var val = shoppingCart[i];
$("#id" + val.substring(4)).val( "5");
}

Is it possible to create multiple functions using a for loop in Javascript?

I am trying to create functions with the same name as the buttons' ids
var a = ["ab1","aj6","yt5","gf5","js9"]
for (i = 0; i < a.length; i++) {
var el = a[i];
function el(){
list.find(el);
}
$(function() {
$("#"+el).click(el);
}
}
When I do this, I get an
Uncaught TypeError: Cannot read property 'handler' of undefined on
the anonymous function
. But when I change the function name to say "calculate" rather then the var el, it works fine. Any ideas?
if you are trying to bind a click handler to each element with an "id" in the array, then:
var a = ["ab1","aj6","yt5","gf5","js9"]
$.each(a,function(i,val){ //for each item
$("#"+val).on('click',function(){ //bind a click handler
list.find(val); //that finds that element in "list"
});
//or
$("#"+val).click(function(){
list.find(val);
});
//or
$("#"+val).bind('click',function(){
list.find(val);
});
//or
$('body').delegate('#'+val,'click',function(){
list.find(val);
});
})
I don't know, what you're trying to achieve, but "Yes , it is possible to create functions with array values":
var a = ["ab1","aj6","yt5","gf5","js9"];
for (var i = 0; i < a.length; i++) {
window[a[i]] = function(){
};
}
After this, you have 5 global functions with "ab1","aj6","yt5","gf5","js9" names.
You cannot have two variables with the same name. Both var el and function el are called el. JavaScript considers function names as variable names (sort of) where the function is assigned to.
Also, you should probably use a function statement instead of a function declaration. See http://kangax.github.com/nfe/ for more info.
Do it is like this:
var a = ["ab1","aj6","yt5","gf5","js9"]
for (i = 0; i < a.length; i++) {
var el = a[i];
$("#"+el).click(functon(){
list.find(el);
});
}

How to "clean" an array in javascript?

I am stuck here. How can I clean this array:
{"data":[{"id":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]}
So that it looks like:
["5201521d42","52049e2591","52951699w4"]
I am using Javascript.
You just need to iterate over the existing data array and pull out each id value and put it into a new "clean" array like this:
var raw = {"data":[{"":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]};
var clean = [];
for (var i = 0, len = raw.data.length; i < len; i++) {
clean.push(raw.data[i].id);
}
Overwriting the same object
var o = {"data":[{"id":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]};
for (var i = o.data.length; i--; ){
o.data[i] = o.data[i].id;
}
What you're doing is replacing the existing object with the value of its id property.
If you can use ES5 and performance is not critical, i would recommend this:
Edit:
Looking at this jsperf testcase, map vs manual for is about 7-10 times slower, which actually isn't that much considering that this is already in the area of millions of operations per second. So under the paradigma of avoiding prematurely optimizations, this is a lot cleaner and the way forward.
var dump = {"data":[{"id":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]};
var ids = dump.data.map(function (v) { return v.id; });
Otherwise:
var data = dump.data;
var ids = [];
for (var i = 0; i < data.length; i++) {
ids.push(data[i].id);
}
Do something like:
var cleanedArray = [];
for(var i=0; i<data.length; i++) {
cleanedArray.push(data[i].id);
}
data = cleanedArray;
Take a look at this fiddle. I think this is what you're looking for
oldObj={"data":[{"":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]};
oldObj = oldObj.data;
myArray = [];
for (var key in oldObj) {
var obj = oldObj[key];
for (var prop in obj) {
myArray.push(obj[prop]);
}
}
console.log(myArray)
Use Array.prototype.map there is fallback code defined in this documentation page that will define the function if your user's browser is missing it.
var data = {"data":[{"":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]};
var clean_array = [];
for( var i in data.data )
{
for( var j in data.data[i] )
{
clean_array.push( data.data[i][j] )
}
}
console.log( clean_array );
You are actually reducing dimension. or you may say you are extracting a single dimension from the qube. you may even say selecting a column from an array of objects. But the term clean doesn't match with your problem.
var list = [];
var raw = {"data":[{"id":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]};
for(var i=0; i < raw.data.length ; ++i){
list.push(raw.data[i].id);
}
Use the map function on your Array:
data.map(function(item) { return item.id; });
This will return:
["5201521d42", "52049e2591", "52951699w4"]
What is map? It's a method that creates a new array using the results of the provided function. Read all about it: map - MDN Docs
The simplest way to clean any ARRAY in javascript
its using a loop for over the data or manually, like this:
let data = {"data":[{"id":"5201521d42"},{"id":"52049e2591"},
{"id":"52951699w4"}]};
let n = [data.data[0].id,data.data[1].id, data.data[2].id];
console.log(n)
output:
(3) ["5201521d42", "52049e2591", "52951699w4"]
Easy and a clean way to do this.
oldArr = {"data":[{"id":"5201521d42"},{"id":"52049e2591"},{"id":"52951699w4"}]}
oldArr = oldArr["data"].map(element => element.id)
Output: ['5201521d42', '52049e2591', '52951699w4']

A good way to associate a counter to each member of an array in Javascript?

I have an array of strings in Javascript like `var elements = ["string1", "string2"]; The array is created dynamically so it could contain any number of strings. I want to associate a counter to each element of the array. The counter will increment or decrement during the webpage's life.
I was going to try element["string1"].counter = 1; but it didn't work.
What's a good way to implement this?
If you had an array var elements = ["string1", "string2"], you could not access an element with elements["string1"], you are using the value not the index. elements[0] is the correct form of access to the element, using the numerical key.
Even then, strings are special types of object and do not appear to take additional parameters readily, at least not when I tested a moment ago. Which is odd.
You could quickly knock the array in to a set of objects with separate text and counter components.
var elements = ["string1", "string2"];
var elementsWithCounter = [];
for(var index = 0; index < elements.length; index++) {
elementsWithCounter[i] = { text: elements[index], counter: 1 };
}
You could also create a "hash table" using a plain object such as:
var counter = {};
for(var i = elements.length; i--; ) {
counter[elements[i]] = 1;
}
Then you could increment the counter with:
counter['string1'] += 1;
or
counter[elements[0]] += 1;
This might help you.
elementArray = ["string1", "string2"]
function setCounter(str, val) {
for (var i = 0; i < elementArray.length; i++) {
if (str === elementArray[i]) elementArray[i].counter = val;
}
}
function getCounter(str) {
for (var i = 0; i < elementArray.length; i++) {
if (str === elementArray[i]) return elementArray[i].counter;
}
}
setCounter("string1", 5);
getCounter("string1");
Alternatively just access elementArray[index].counter
Javascript primitives/built in objects can't have properties/attributes added to their prototype (i.e. String.prototype.counter = -1 doesn't work correctly). Image, String, Date, Array all can't have properties added.
Maybe instead of a string you should make it an object, similar to what Orbling has posted.

Categories