My javascript switchDiv
function is being called on page load, when I don't want it to. When its called, it goes through the switch statement and does each of the cases, except the default. Anybody know how to fix this?
$(document).ready(function() {
$("#be-button").on("click", switchDiv(1));
$("#red-button").on("click", switchDiv(2));
$("#green-button").on("click", switchDiv(3));
$("#blue-button").on("click", switchDiv(4));
});
var switchDiv = function (mapNum) {
console.log(mapNum);
switch(mapNum) {
case 1:
$("#be-data").show();
$("#red-data").hide();
$("#green-data").hide();
$("#blue-data").hide();
break;
case 2:
$("#be-data").hide();
$("#red-data").show();
$("#green-data").hide();
$("blue-data").hide();
break;
case 3:
$("#be-data").hide();
$("#red-data").hide();
$("#green-data").show();
$("blue-data").hide();
break;
case 4:
$("#be-data").hide();
$("#red-data").hide();
$("#green-data").hide();
$("blue-data").show();
break;
default:
$("#be-data").show();
$("#red-data").hide();
$("#green-data").hide();
$("#blue-data").hide();
}
}
The first approach for calling a function on the page load is the use an onload event inside the HTML <body> tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.
onload runs after page load and all javascript is available, so the codeAddress() function can be declared anywhere within the page or linked js files. It doesn't have to come before unless it were called during the page load itself.
The earliest point at which you can run a Javascript function with access to the DOM (without waiting for page load) is by placing a <script> tag right after the opening <body> tag. Scripts inside the <head> will run before this occurs, but there won't be access to the elements on the page.
If you need the whole page to be ready, including images, check for document. readyState === "complete" . @costa, if document. readyState == "complete" , it means everything, including images, have been loaded.
You are executing the functions, rather than passing them as parameters. Ie, you need to distinguish between passing a function:
function myFunc() { }
$("selector").on("click", myFunc); // "myFunc" is the handler
And executing a function:
function myFunc() { }
$("selector").on("click", myFunc()); // execute "myFunc" -- its return value is the handler
Of course, you can't use the first in this case, since switchDiv
itself has a parameter. One way to get around this is to wrap it in an anonymous function:
$("#be-button").on("click", function() { switchDiv(1); });
Since you're doing this multiple times, however, you will probably want a helper function like "createHandler" or something:
function createHandler(num) {
return function() { switchDiv(num); };
}
$("#be-button").on("click", createHandler(1));
$("#red-button").on("click", createHandler(2));
// etc
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With