onclick toggle

[adrumsolo4u]

i have been trying to find a way to do it, but i can't seem to think of one. i need to do this:

var animElements = document.getElementById("resizercontainer").getElementsByTagName("p")
  for(var i=0; i<animElements.length; i++) {
  animElements[i].onmouseover = widthChange;
  animElements[i].onmouseout = widthRestore;
  }
  function widthChange() {
    if (!this.currentWidth) this.currentWidth = 150;
    doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
    }
  function widthRestore() {
    if (!this.currentWidth) return;
    doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
    }

but i want to use .onclick instead of .onmouseover and .onmouseout
i have come up with this:

var animElements = document.getElementById("both").getElementsByTagName("p");
  for(var i=0; i<animElements.length; i++) {
    if (currentwidth = 150){animElements[i].onclick = sizeChange;}
    else {animElements[i].onclick = sizeRestore;}
    }
  function sizeChange() {
    if (!this.currentWidth) this.currentWidth = 150;//if no mem is set, set it first;
    doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
    }
  function sizeRestore() {
    doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
    }

but i still have not found a way for it to detect if it has been clicked before.
any help would be apreciated

[MattEvans]

Right.. not entirely sure what you're after; I can't work out which you want:

1: The first 'click' to perform 'sizeChange' and the next click to perform 'sizeRestore' ( and then to repeat for subsequent clicks ).
2: The click 'down' to perform 'sizeChange' and the release of the click to perform 'sizeRestore'.
3: Something else?

If you want number 1:

//Note: this is NOT the only way to do this.
var animElements = document.getElementById("both").getElementsByTagName("p");
  for(var i=0; i<animElements.length; i++) {
    animElements[i].onclick = sizeChange;
    }
  function sizeChange() {
    if (!this.currentWidth) this.currentWidth = 150;
    doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
    this.onclick = sizeRestore;
    }
  function sizeRestore() {
    doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
    this.onclick = sizeChange;
    }

If you want number 2, use the first example, but use mousedown and mouseup instead of mouseover and mouseout.

If something else, be more clear about exactly what you intend to do.

[adrumsolo4u]

yes that's exactly what i meant to do. sorry for the confusion of what i said.
now i wish i knew why your code works, because this part:

function sizeChange() {
	if (!this.currentWidth) this.currentWidth = 150;
	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
	this.onclick = sizeRestore;
	}
function sizeRestore() {
	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
	this.onclick = sizeChange;
	}

does not make sense to me.
i understand

if (!this.currentWidth) this.currentWidth = 150;

that makes sense, if there is nothing set as current width, set it.

but wonce that is done and the object has been clicked once, it continues.

doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
	this.onclick = sizeRestore;

how does this part work?
the first line changes the current width (with the rest of my code) but how does the second line work when you click again?
it looks as if, when you click it does the size change and then does the size restore at the same time, but that doesn't happen.
i'm sorry if what i'm asking seems stupid, but i would rather understand the code i use, than just copy and paste.

[MattEvans]

Initially, the click handlers for all objects are assigned to the size change function. When you click an object for the first time, the size is changed, and the click handler for that object is re-assigned to the function that performs a size restore. When you click again, the size is restored, and the click handler is assigned to size change again. The statements like: this.onclick = sizeRestore; don't actually call the function; they infact use the name of the function as an identifier. You can tell the difference between a call to a function and a use of the name of a function because a call always has parenthesis even if the function has no arguments, i.e. sizeRestore( ); .

[adrumsolo4u]

Thank you, now it makes complete sense. I realized that it wasn't a normal call to the function, but i assumed it was a different way of calling. I really wish tutorials would explain the code in greater detail. I want to LEARN, not copy and paste.