etsted Posted May 10, 2014 Share Posted May 10, 2014 (edited) I think i have been using jquery wrong, or maybe not the best way. I want to wrap jquery outside javascript functions, to make sure that the page i fully loaded, so that i wont have any cached files, when i make a request with ajax. <!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script>$(document).ready(function(){ $("#statusBtn").click(function(){ function heidi(hilsen="heidi"){ return hilsen; }document.write(heidi()); });});</script></head><body><button id="statusBtn" onclick="heidi('lars')">klikk</button></body></html> Now i have tried this an it works, except not the way i want, the parameter "lars" is not being set, and this returns "heidi" instead Edited May 10, 2014 by etsted Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2014 Share Posted May 10, 2014 I think the syntax highlighter is showing what your problem is. The word "lars" is outside of the attribute's value. Link to comment Share on other sites More sharing options...
etsted Posted May 10, 2014 Author Share Posted May 10, 2014 still didnt work Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2014 Share Posted May 10, 2014 Another problem is that the function heidi() isn't global, it's not accessible from the element's onclick scope. Put the function declaration outside of the .ready() handler. The hilsen="heidi" syntax doesn't work in Javascript, that's a C++ / Java / PHP thing. If you want to give a default value then you'll have to set it inside the function: function heidi(hilsen) { if(typeof hilsen == "undefined") { hilsen = "heidi"; } Link to comment Share on other sites More sharing options...
Hadien Posted May 10, 2014 Share Posted May 10, 2014 (edited) There are a number of things wrong in this code. let us start with the jquery onclick handler you wrote. $("#statusBtn").click(function(){ function heidi(hilsen="heidi"){ return hilsen; }document.write(heidi()); }); 1) you don't need to define another function "heidi" inside your onclick handler, unless the handler your writing is very complex and would have to do a section of code numerous times. in this case you're not. 2) in Javascript, (Hilsen="heidi") is not how you define a default value. Javascript is type-insensitive and you can't overload a function by simply enforcing the number of specific datatypes a function will have, like you can in other languages. You generally have to resort to prototypes and use "shadowing" to mimic this effect. Don't worry about prototypes, you don't need to learn it here. if you want to set a default variable in a function you should run a typeof check to see if it's undefined, from within the function function heidi(hilsen ){ //checks if hilsen was a passed varible, if so it uses that variable // otherwise hilsen will default to "heidi" return (typeof hilsen !== 'undefined') ? hilsen : "heidi";)$(document).ready(function(){ $("#statusBtn").click(function(){ var text = $(this).data("text"); document.write(heidi(text)); });}); I moved the function heidi outside the onclick handler (and even outside the onready handler, though I didn't need to as it has no real impact on the code). this way everyone can access it. In fact I don't even need the heidi function at all, but one step at a time. Notice I wrote $(this).data("text"). This is an answer to the HTML part of your problems, so read on...Now lets look at that HTML: <button id="statusBtn" onclick="heidi("lars")">klikk</button> here you have a couple more problems. 1) you can't use double quotes to define lars. Your browser will see the double quotes and think, "oh, this is the end of the onclick handler" and not, "oh, you're telling me about a string". you would want to use single quotes in this case like: <button id="statusBtn" onclick="heidi('lars')">klikk</button> HOWEVER, I should say that you shouldn't do this anyway for your particular case as explained in... 2) you've already defined a click handler in jQuery. and since that handler is defined inside an onready handler... then jquery will simply overwrite and ultimately ignore the onlick you wrote in the html. Even if it didn't it would have had no idea what heidi() was anyway. only way the HTML's handler would run is if somehow the Jquery script wasn't loaded. Now... Jquery is already taking care of the click handler for you but you still want to be able to pass parameters into it on a per-element basis, right? Enter the data-xxx attribute. when you want to store special data for jquery or some other library to parse you would add an attribute with "data-" prepended to the name of the variable. in this case I use "data-text", but I could have easily gone "data-heidi" or "data-blahblah". Jquery already has a function that properly parses these custom attributes via .data(""). data-xxx attribute validate under the HTML5 specification and won't break earlier specs so you can use it with out fear. Combined with the Jquery code I posted earlier, your button should look like this: <button id="statusBtn" data-text="lars">klikk</button> That's all you need and the code should work. edit: oh wow, I've been typing this post for so long you already got a number of replys and you've updated your post a bit Edited May 10, 2014 by Hadien Link to comment Share on other sites More sharing options...
davej Posted May 10, 2014 Share Posted May 10, 2014 Are you only using jQuery for the ready function? I don't remember jQuery in your other code. Link to comment Share on other sites More sharing options...
etsted Posted May 10, 2014 Author Share Posted May 10, 2014 ive updated it a little, i thought it would help Link to comment Share on other sites More sharing options...
etsted Posted May 10, 2014 Author Share Posted May 10, 2014 Another problem is that the function heidi() isn't global, it's not accessible from the element's onclick scope. Put the function declaration outside of the .ready() handler. The hilsen="heidi" syntax doesn't work in Javascript, that's a C++ / Java / PHP thing. If you want to give a default value then you'll have to set it inside the function: function heidi(hilsen) { if(typeof hilsen == "undefined") { hilsen = "heidi"; } But if i would to call that function, would it still wait for the page to load, before running whats inside the jquery function, since the jquery ready function is set? Link to comment Share on other sites More sharing options...
Ingolme Posted May 10, 2014 Share Posted May 10, 2014 A function declaration doesn't ever execute, it's safe to have it outside of the ready() handler. The only reason you need ready() is to access HTML elements that would not have loaded yet. Link to comment Share on other sites More sharing options...
thescientist Posted May 20, 2014 Share Posted May 20, 2014 Are you only using jQuery for the ready function? I don't remember jQuery in your other code. he's also using it for the event handling $("#statusBtn").click(function(){ function heidi(hilsen="heidi"){ return hilsen; } document.write(heidi());}); Link to comment Share on other sites More sharing options...
thescientist Posted May 20, 2014 Share Posted May 20, 2014 I can't stress enough that we should be discouraging new developers from using document.write. Please learn to use your console. you should be looking there for errors anyway so it should already be open. Link to comment Share on other sites More sharing options...
etsted Posted May 21, 2014 Author Share Posted May 21, 2014 It says in w3schools.com that you should use document.write Link to comment Share on other sites More sharing options...
thescientist Posted May 21, 2014 Share Posted May 21, 2014 Right, but that doesn't change the fact that it's still not a practical way to debug. I could understand you using it because you read it, but I would still be remiss if I didn't tell you there was a better way. Link to comment Share on other sites More sharing options...
davej Posted May 21, 2014 Share Posted May 21, 2014 Tutorials often use document.write, but it is a crude method... which you should generally avoid using in your own code... https://www.google.com/#q=avoiding+document.write Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now