changing function once clicked

alexgeek · August 22nd, 2007, 11:34 PM

Okay, say I have a header:
<h1 class="header" id="myHeader" onclick="myfunction()">header</h1>
that calls this function:
function myFunction()
{
var x=document.getElementById("remove_div");
x.parentNode.removeChild(x);
}

Is there a way to change the header to this:
<h1 class="header" id="myHeader" onclick="myfunction2()">header</h1>
after it's been clicked?
Thanks guys, I only just learnt javascript so bare with me

pa007 · August 23rd, 2007, 12:06 AM

RE you trying to remove the div onclick and then replace it when it's clicked again? There is probably an easier way to do this.

Pete.

alexgeek · August 23rd, 2007, 12:25 AM

yeah

either method will do i guess
How do you do that one?

joe3dge · August 23rd, 2007, 01:49 PM

if you add a third function and a variable to test wheather you clicked on the headr, then you wont have to change any html.

like this:

Code:

<script language=javascript>
 
function myFunction(){
/*do something on the first click*/
}
 
function myFunction2(){
/*do something on the second click and any following clicks*/
}
 
var isClicked = 0; //variable to test wheather you clicked the header.
                        //initialy at false
 
function onClickFunction(){
  if(!isClicked){//when you fist click the header isClicked is set to false so it exicutes the first function and sets is clicked to true
    isClicked = 1;
    myFunction();
  }
  else{//any other time you click it, is clicked is set to trues so it exicutes the second function
    myFunction2();
  }
}
 
</script>
 
<h1 class="header" id="myHeader" onclick="onClickFunction()">
header
</h1>

alexgeek · August 23rd, 2007, 05:25 PM

thank for that

also,
since:
var x=document.getElementById("remove_div");
x.parentNode.removeChild(x);
removes the div
how to i put it back in?
I don't want to use visiblity, as it just hides it and the space is still taken up

alexgeek · August 25th, 2007, 10:54 PM

uh bump?

pa007 · August 26th, 2007, 08:54 PM

If you change it too display none it actually takes it out of the document flow so that would be your best bet. You don't really want to be removing and re-writing the div into the code, that wouldn't be very efficient. You can either change the style attribute of that element or change the class name (you would have to have the alternative style set up in the css of course).

Hope that helps a bit.

Pete.

alexgeek · August 26th, 2007, 09:00 PM

Thanks pete