• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

JS "onchange" does not seem to work...

fuzzybabybunny

fuzzybabybunny

Moderator<br>Digital & Video Cameras
Moderator
Code: 
//These are two checkboxes for a form.

<input type="checkbox" id="spw" name="spw" value="Single Property Website"  amount="25" onchange="sum_amount()" checked />
<label for="spw"> Single Property Website: $25<br></label>

<input type="checkbox" id="panoramas" name="panoramas" value="Panoramas / Virtual Tour Effect" amount="20" onchange="sum_amount(); return checkbox();" >
<label for="panoramas">Panoramas: $20<br></label>


//If the Panoramas checkbox gets checked, the SPW checkbox automatically gets checkmarked as well.

function checkbox()
	{
		if(document.getElementById("panoramas").checked==true)
		{
			
			document.getElementById("spw").checked=true;
			
		}
	}


//If the SPW checkbox is checked, the total_sum is 25. 
//If Panoramas is checked, total_sum is 20.
//If both are checked, total_sum is 45.

function sum_amount()
{
var total_sum=0;
if(document.getElementById("spw").checked==true)
			{
				total_sum+=25;
			}
if(document.getElementById("panoramas").checked==true)
			{
				total_sum+=20;
			}
}

The problem here is with total_sum and onchange and checkbox()

With both SPW and Panoramas checkmarked, the total_sum should be 45.

If I manually checkmark SPW, total_sum is 25
If I then checkmark Panoramas, total_sum is 45.

BUT IF..

Both boxes start off unchecked.
I checkmark Panoramas.
The checkbox() function will then automatically checkmark SPW.
So now both boxes are checked.
But the total_sum is 20, not 45.

If I toggle the SPW checkbox off and then back on, total_sum changes to the correct amount of 45.

Why is it that when I use the checkbox() function to automatically checkmark SPW, the onchange event does not work and total_sum is not correct?
 
First using inline javascript, meaning stuff like onchange="myFunction()" is bad practice and doing this in 2014 means you will need to refresh your knowledge.

http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice

fuzzybabybunny said:
Why is it that when I use the checkbox() function to automatically checkmark SPW, the onchange event does not work and total_sum is not correct?
Click to expand...

The issue is very obvious. look at the order the functions are executed. If you don't get it with this hint, I suggest you search for a different career path.




You really couldn't try to get your point across with insulting him?

Try harder next time.


esquared
Anandtech Forum Director
 
Last edited by a moderator:
I can't find a problem (other than what beginner99 has said which is that this is very much the old style of JS).

The following example works exactly as its meant to - when panorama's is clicked SPW also gains a check mark if it doesn't have one. The functions get called in the debugger.

Here is the full example I made from your code, just save it as a html file:

Code: 
<html>
<head>
<title>ATF problem</title>
</head>
<body>

<input type="checkbox" id="spw" name="spw" value="Single Property Website"  amount="25" onchange="sum_amount()" checked />
<label for="spw"> Single Property Website: $25<br></label>

<input type="checkbox" id="panoramas" name="panoramas" value="Panoramas / Virtual Tour Effect" amount="20" onchange="sum_amount(); return checkbox();" >
<label for="panoramas">Panoramas: $20<br></label>


<script>
//If the Panoramas checkbox gets checked, the SPW checkbox automatically gets checkmarked as well.

function checkbox()
	{
		if(document.getElementById("panoramas").checked==true)
		{
			
			document.getElementById("spw").checked=true;
			
		}
	}


//If the SPW checkbox is checked, the total_sum is 25. 
//If Panoramas is checked, total_sum is 20.
//If both are checked, total_sum is 45.

function sum_amount()
{
var total_sum=0;
if(document.getElementById("spw").checked==true)
			{
				total_sum+=25;
			}
if(document.getElementById("panoramas").checked==true)
			{
				total_sum+=20;
			}
}
</script>

</body>
</html>
 
Although I agree with the point about unobtrusive JavaScript, that was a pretty rude response. The OP understands the order that the functions are being called; his/her question was:
fuzzybabybunny said:
Why is it that when I use the checkbox() function to automatically checkmark SPW, the onchange event does not work and total_sum is not correct?
Click to expand...

The answer is that the browser knows when an event is triggered by JavaScript (as opposed to being triggered by the user clicking on a control, for example), and it is ignoring it. Google "triggering JavaScript events manually" and you will get an idea of how to accomplish what you are trying to do.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top