I tried to make a simple function which should give me some alerts in the window. I have made an mistake there but cannot find it. Here my code:
var testList = new Array {
"This",
"is",
"a",
"loop"
};
function printList(list) {
for (i = 0; i < list.length; i++) {
alert(list[i]);
}
return;
}
$("#button1").click(printList(list));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button1" type="button" value="Click me!" />There's several issues:
() to enclose the array items, not {}. testList, not just list. printList() function on load of the page as you're passing the result of the function, not its reference.return is redundant when placed at the end of a functionAlso note that you should really use console.log for debugging, not alert(). The latter is bad as it coerces data types, so what you see may not necessarily be the actual value. It's also modal, which means it blocks the UI updating. Not to mention it's really annoying when you do it in a loop and you have to click 'Ok' N times.
Finally, you can shorten the array definition by using just [] to declare the elements, like this:
var testList = ['This', 'is', 'a', 'loop'];
function printList(list) {
for (i = 0; i < testList.length; i++) {
console.log(testList[i]);
}
}
$("#button1").click(function() {
printList(testList);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button1" type="button" value="Click me!" />
click() method - it's all in the working code example in the answer.You can try this
var testList = ["This", "is", "a", "loop"];
$("#button1").click(function(){
printList(testList);
});
function printList(list) {
for (i = 0; i < list.length; i++) {
alert(list[i]);
}
return;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button1" type="button" value="Click me!" />
Creating an Array in Javascript
Syntax:
var array_name = [item1, item2, ...];
var testList = ["This", "is", "a", "loop" ];
JavaScript HTML DOM EventListener:
The addEventListener() method attaches an event handler to the specified element.
document.getElementById("button1").addEventListener("click", function(){ printList(testList); });
$("#button1").click(printList(list));=>$("#button1").click(printList(testlist));