Develop Reference

Defining a hardcoded Javascript function dynamically

I am programming a web frontend for a database application. I have several function calls in the html body, like:
<input type=button value="Set 1" id="btn1" onClick=edit_entry(this,"edit","title")>
<input type=button value="Set 2" id="btn2" onClick=edit_entry(this,"edit","name")>
<input type=button value="Set 3" id="btn3" onClick=edit_entry(this,"edit","gender")>
function edit_entry(src, action, arg1) {
alert(src.onclick);
src.onclick = function () { edit_entry( src, action, arg1 };
alert(src.onclick);
}
When clicked on "btn1", the first alert returns the hardcoded function definition: function onclick(event) { edit_entry(this,"edit","title") }
But the second alert returns the function definition with variables function onclick(event) { edit_entry(src, action, arg1) }
So when these variables change later the function does get the wrong values. How can I apply the content of the variables to the function definition instead of the variables itself so that the definition is again function onclick(event) { edit_entry(this,"edit","title") } ?
P.S.: I know that this code snippet makes no sense as it shall only describe my problem as simple as possible.
Here is my code I was referring to. I hope this all makes more sense now. Sorry for the inconvenience.
HTML Body:
<input type="button" value="Edit" id="group_1_button_edit" class="action_element" onClick=edit_entries(this,"edit","artnr","artalt","bez1","bez2","bez3")>
<input type="button" value="Edit" id="group_9_button_edit" class="action_element" onClick=edit_entries(this,"edit","dok1","dok2","dok3","dok4","dok5")>
The values behind "edit" are the IDs of the input textboxes the content will be read from.
function edit_entries(caller,action,opt1,opt2,opt3,opt4,opt5,opt6,opt7,opt8,opt9,opt10,opt11,opt12) {
caller_id = caller.id.split("_");
id = caller_id[1];
switch(action) {
case "edit":
//Making textboxes writeable for changing values
//[...]
document.getElementById("group_"+id+"_button_edit").value="Save";
document.getElementById("group_"+id+"_button_edit").onclick=function(){ edit_entries(this,"save",opt1,opt2,opt3,opt4,opt5,opt6,opt7,opt8,opt9,opt10,opt11,opt12); };
break;
case "save":
if (confirm("Datensatz wirklich aktualisieren?")) {
artnr_key = XML_OBJ.getElementsByTagName("artnr")[0].textContent;
string = "";
//Building the AJAX Request String: textbox id = value
url = 'mysql_req_n1.php?type=edit_entries&'+string;
send_request(url);
}
break;
}
}
//called by AJAX handler
function edit_entries_unlock() {
//Getting "id" by value check
counter_a = 1;
while (counter_a <= 9) {
if (document.getElementById("group_"+counter_a+"_button_edit").value == "Save") id = counter_a;
counter_a++;
}
//Getting textbox IDs located in the AJAX response
opts = XML_OBJ.getElementsByTagName("opts")[0].textContent;
options = opts.split(",");
//Making textboxes readonly again
//[...]
document.getElementById("group_"+id+"_button_edit").value="Edit";
document.getElementById("group_"+id+"_button_edit").onclick=function(){ edit_entries(this,"edit",options[0],options[1],options[2],options[3],options[4],options[5],options[6],options[7],options[8],options[9],options[10],options[11]); };
}
And that is what happens:
I click on the first button (group_1_button_edit). It jumps to the switch block "edit" making the textboxes writable and changing the edit button to a save button. Works fine.
I click on save. The switch block "save" builds the request string and starts the ajax request.
The ajax handler starts edit_entries_unlock() when the response is there. Part of the XML Response are the textbox IDs I have used before. The onclick function gets changed again to an "edit" function with the corresponding textbox IDs from the XML object.
Now I click on the second button "group_9_button_edit". Everything is working like mentioned above. No problems. The textboxes of group 9 unlock, get saved und locked again as wanted.
But now the bug: I click on the first button again "group_1_button_edit" which now uses the changed function definition. It starts the switch block "edit" but with the values of the textbox IDs of GROUP 9 (which I edited before) and not GROUP 1.
I guess it has something to do with the variables opt1-opt12. They always contain the values of the last "edit_entries_unlock()" run. And as all the edited function definitions uses opt1-opt12 as well they start with the values of the last run and not with the values I used when recreating the function definition.
For that reason I asked how to build a function definition with the content of variables during the function creation process instead of the content during the execution process.
I hope that makes a lot more sense now. Sorry for the wall of text.

This is a very bad way to pass data.
You should avoid using inline code
<input type=button value="Set 1" id="btn1" onClick=edit_entry(this,"edit","title")>
<input type=button value="Set 2" id="btn2" onClick=edit_entry(this,"edit","name")>
<input type=button value="Set 3" id="btn3" onClick=edit_entry(this,"edit","gender")>
Should be
<input type=button value="Set 1" id="btn1" data-field-name="title">
<input type=button value="Set 2" id="btn2" data-field-name="name">
<input type=button value="Set 3" id="btn3" data-field-name="gender">
<script>
(function(){ // or use on load event
// define the click function
var clickFunction = function(event){
// get the element data
var fieldName = event.target.attributes["data-field-name"].value;
// do what you need to do.....
}
// query the DOM to get the elements you are after.
var el = document.getElementsByTagName("input");
// iterate them and add the event handler to each.
for(var i = 0; i < el.length; i++){
el[i].addEventListener("click",clickFunction,false);
}
})();
</script>
As for what you are trying to do in the example you gave I have no clue so maybe this will help you.

You onclick handler creates a closure. So, the values src, action and arg1 in the below (from your edit_entry function) will be what it was at the time this function was created / recreated (the latter for when you click it the next time)
src.onclick = function () { edit_entry( src, action, arg1 };
You'd be able to modify these only within the same method (or it's child methods). Note that since you set the onclick to the above you are basically passing around the same variables into the handler the next time it is clicked.
Any changes you are seeing for these variables would be from within your onclick handler (and not external to it)

Finally with the help of T.J.Crowder I was able to fix the code.
The line that I needed to fix was
options = opts.split(",");
to
var options = opts.split(",");
I didn't know that declaring variables inside a function without var would make them a part of the window object and therefore making it a global variable. So my closure was accessing a global variable instead a local one.
One small word, but with big impact.

Onclick function doesn't work for calling javascript

I have try this on jsfiddle,
here's the html :
<input onclick="masuk(10);" type="radio" name="myRadio1" value="Yes"/>1<br/>
<input onclick="alert(10);" type="radio" name="myRadio1" value="Yes"/>2<br/>
here's the js :
function masuk(a) {
alert(a);
}
here's the link : http://jsfiddle.net/codingsolver/MsYqx/
the point is, why if click the first radio button which call function masuk() it doesn't want to show the alert. But if I directly call the alert, it works. Does any one know why?? Thanks lots

It should work. Make sure you are loading javascript after the DOM has been loaded. Place javascript above </body>

Your jsFiddle is gone, but in order to call from HTML like that, your variable would have to be globally defined, which it probably isn't (but can't say for sure without the full source).

Javascript getElementById value setting getting reset on function return

I have a simple function to show / hide a div element. I have a javascript function to do that. I debugged this with Opera. The function sets the hidden value properly on the div element. I can see the div element disappear. However, when the function returns the div element reappears. The javascript function is in its own file:main.js:
function showhide(name){
var elem = document.getElementById(name) ;
if( elem.hidden == false ) {
document.getElementById(name).hidden = true ;
} else {
document.getElementById(name).hidden = false ;
}
}
The Html is:
<div class=wrap><p>
<div class=sidebar>
<FORM><input type="submit" value="Toggle" onclick="showhide('specname');"/></FORM></div>
<div class=main>main Div
<div id="specname">collapsible text</div></div></p></div>.
I have set debugging breakpoints in the javascript function showhide to see that the value is being set properly. But on function return, the value is reset.
It is probably something simple I am missing but can't seem to see it? Any ideas? Thanks!
The answers solved my problem. I was missing the fact that the submit repainted the page and I lost my changes. I changed the type=submit to type=button. And I removed the form to just an input element with type button. That worked very nicely. Thanks everyone for your help!!! I really appreciate your answers!

The following wont do anything in some browsers:
document.getElementById(name).hidden = true
change it to
document.getElementById(name).style.display = 'block' // and 'none' for the matching line
does that make it do what you need?
As others have pointed at, it is also submitting the page - either use a different element or change the function to start :
function showHide(e, name) {
e.preventDefault();
//do the toggle here
return false;
}

The problem is you are using a submit control which will submit to the server and refresh the page. You want to stop the submit or change the control type. Both of the following should work. I recommend the 2nd one.
Try this
<FORM><input type="submit" value="Toggle" onclick="showhide('specname'); return false;"/>
or this
<input type="button" value="Toggle" onclick="showhide('specname');"/>

Probably because when you click the button the form submits and it refreshes the page ?

You should not be using a form just to have a button that does something. Instead, try using
<button onClick="showhide('specname');">Toggle</button> (and get rid of the form entirely)

Try this for your showhide().
function showhide(name){
var elem = document.getElementById(name);
(elem.style.visibility == 'hidden'?elem.style.visibility = 'visible':elem.style.visibility = 'hidden');
}
OR similarly:
function showhide(name){
var elem = document.getElementById(name);
(elem.style.display== 'none'?elem.style.display= 'inline':elem.style.display= 'none');
}
Maybe try them both and see which you need.
Cheers.

Second JS button triggers first JS button

I know I have to be doing something wrong, but again I don't fully understand what I'm doing as it is.
I'm creating a form which will have multiple buttons linked to JavaScript functions to do stuff. I'm at the very basic point of having these two buttons on the same page, and when you onMouseOver, onMouseDown, onMouseUp, onMouseOut it changes the image of my button.
I know there are other ways to do this (better ways) but I'm trudging on in this direction to at least get a better understanding of how JavaScript works. I know I'll have somewhat more complicated things to do down the road that may require something like this and I want to be sure I understand it when I get there.
The problem I'm having is that the second button does not do anything when you try to use it. The first button works fine, but the second button doesn't And when you try to use the second button, it makes the first one go off. So if I onMouseOver button 2, button 1 will show the affect. I tried copying my image files into a new set so they aren't using the same images, but that just showed me what when I use button 2, the functions set up for button 2 are being applied to button 1.
Anyway, here's the HTML code....
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:addElement()" ><img id="button" onMouseOver="hover_over()"
onMouseOut="hover_off()" onMouseDown="click_add()" onMouseUp="release()"
src="images/add_default.png" name="add" width="43" height="21"></a></p>
<input type="hidden" value="0" id="theValue2" />
<p><a href="javascript:addProduct()" ><img id="button2"
onMouseOver="hover_over_second()" onMouseOut="hover_off_second()"
onMouseDown="click_add_second()" onMouseUp="release_second()"
src="images/add_default2.png" name="add2" width="43" height="21"></a></p>
And here is the JavaScript....
////
//----------------Button Animation 1-------------------
////
function hover_off() {
document.images.add.src='images/add_default.png';
}
function hover_over() {
document.images.add.src='images/add_hover.png';
}
function click_add() {
document.images.add.src='images/add_click.png';
}
function release() {
document.images.add.src='images/add_hover.png';
}
////
//---------------------------------------------------
////
////
//----------------Button Animation 2-------------------
////
function hover_off_second() {
document.images.add.src='images/add_default2.png';
}
function hover_over_second() {
document.images.add.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add.src='images/add_click2.png';
}
function release_second() {
document.images.add.src='images/add_hover2.png';
}
////
//---------------------------------------------------
////
What am I doing wrong here? How do I get these links to actually work separately from each other?
Please teach me wise ones. I know this has to be stupid simple.

You are targetting the same element in your second button handler, it should be add2 not add like the first one that's why the first element src attribute is changed instead of the other.
function hover_off_second() {
document.images.add2.src='images/add_default2.png';
}
function hover_over_second() {
document.images.add2.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add2.src='images/add_click2.png';
}
function release_second() {
document.images.add2.src='images/add_hover2.png';
}

function onclick not working .. ... not showing alert box

html code
<input type="button" value="+" onclick="alert()" />
In chrome after inspecting it showing this error Uncaught RangeError: Maximum call stack size exceeded.
javascript
<script type="text/javascript">
function alert() {
alert("Hello! I am an alert box!!");
}
</script>
help me by telling how to solve this

You override the existing function definition with new definition, which in addition is calling itself, causing too much recursion.

As other users mentioned you just need to create your function with a different name than alert() which is an already defined function in javascript, you shouldn't be using that.
I would rather use the standard addEventListener, will make your code cleaner as well as your html
You can do something like this, also you can try it right from this page:
function myDefinedAlert() {
alert("Hello! I am an alert box!!");
}
var el = document.getElementById("yourButton");
el.addEventListener("click", myDefinedAlert, false);
<input id="yourButton" type="button" value="+" />
Press the button, try it, and copy it to your code, let me know if it works :)

that's because you call alert() in alert(), so it turns out in recursion.

The alert() is a built-in function, which is not meant to be redefined. Although you redefine, you are calling the same function inside the new function, which is wrong. So, in simple terms, give a different name like myAlert() or something:
function myAlert() {
alert("Hello! I am an alert box!!");
}
So recursively the alert() function gets called and it overflows the stack.
Solution Snippet
function myAlert() {
alert("Hello! I am an alert box!!");
}
<input type="button" value="+" onclick="myAlert()" />

You can not have a recursive function such as what you have done here in Javascript as it would continue to loop out of control and consume more memory in the browser. When you call a function from within a function you need to make sure that you are not calling the same function.