Onclick not changing

JavaScript
1

Hi Guys,
I wrote some code to open and close panels on an admin backend.

The button had a value of ‘+’ (which should change to ‘-’ when the panel opens) and an onclick of ‘buttonOpen(this.id)’ (which I want to change to ‘buttonClose(this.id)’)…

When I wrote the code it was an ‘if’ & ‘else if’ statement, but the code would only run once, so I split it into 2 functions, with the end instruction of the first changing the onclick of the button to run the second function, like so…

function buttonOpen($button){
	
	
	var $targetDiv = $button.substr(4);
	
	if (document.getElementById($targetDiv).style.display = 'none'){
		document.getElementById($targetDiv).style.display = 'block';
			document.getElementById($button).value = '-';
			document.getElementById($button).onclick = 'buttonClose(this.id)';
			
	} 
	
}

function buttonClose($button){
	var $targetDiv = $button.substr(4);
		if (document.getElementById($targetDiv).style.display = 'block'){
		document.getElementById($targetDiv).style.display = 'none';
			document.getElementById($button).value = '+';
			document.getElementById($button).onclick = 'buttonOpen(this.id)';
	}
}

At the moment the first function runs (and visibly changes the value of the button from ‘+’ to ‘-’, but the onclick event is not rewritten and remains as written in the original html…

Can anyone tell me why? Any help would be greatly appreciated…

Jim :slight_smile:

2

Maybe change direction, and have a ‘buttonToggle()’ function. One function that checks to see if it’s open, or closed and then changes to the opposite state? This would remove the need to change the onclick attribute.

3

That’s the way I originally had it, rusty. Trouble is, once the function has changed the sign on the button and opened the panel, it then won’t run again… that’s why I made two functions… (As you’d probably guess, the two functions came from separating the ‘if’ ‘else if’ statements from the first prototype function)…

4

hmmm… that’s odd. Are you getting any errors in your firebug console?

5

No errors, no…

btw… I’ve just reverted it to what it was:

function buttonOpen($button){
	

	var $targetDiv = $button.substr(4);

	if (document.getElementById($targetDiv).style.display = 'none'){
		
		document.getElementById($targetDiv).style.display = 'block';
		document.getElementById($button).value = '-';
			
	
	} else if(document.getElementById($targetDiv).style.display = 'block'){

		document.getElementById($targetDiv).style.display = 'none';
		document.getElementById($button).value = '+';
				
	}
}

It opens, but then it doesn’t close, and watching firebug it repeatedly attempts to run the half of the code…

I reckon that when the browser stores the source code and javascript modifies it, the modification is held as a variable and so the function repeatedly checks the source code, not the generated source (newly updated with modifications…)

Is there anyway to force javascript to look at the version of the page which the browser holds in memory?

6

Error on first line after code: It should say that it runs the first half of the code…

7

Quick question. Why is their a “$” sign in front of your variable? I didn’t realize that was supported in Javascript, but in PHP.

8

In PHP the $ symbol denotes a variable. In JavaScript the $ symbol is just nother character, so a variable could be called button, $button, but$ton, or button$

Common convention though is for the $ symbol to be used in terms of a library, such as with jQuery where $ is used to access that library, and to label library objects with names that start with $ symbol.

For example:


$divs = $('div');

I suspect that the original poster uses the $ symbol in JavaScript because he’s used to programming in PHP. JavaScript allows variables to be named in the PHP syntax, but it’s not a good naming convention to use as it leads to confusion about whether the variable is from a library, or even in regards as to which language the code is written.

9

Yep! Got it in one…

Most of the programming I do is PHP - I’ve re-written it and dropped the ‘$’ s …

It still doesn’t work though (obviously, as it’s only a name change which, while important, doesn’t change the functionality… :frowning: )

But thank you for your help, anyway… :slight_smile:

I think the key, and I’m not sure I really understand who javascript works here, is that when the function runs the first time it changes the value from the original html, but when it runs the second time it doesn’t refer to the new value, instead it refers to the original value…

It’s like Javascript caches a copy of the page and changes it, but when functions are re-run, they always refer to the original html… Is that correct?