changing function once clicked

[alexgeek]

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]

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]

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

[joe3dge]

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: Select all

<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]

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]

uh bump?

[pa007]

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]

Thanks pete