JavaScript function not called for all events

Question

I am new to Javascript and HTML programming and I couldn't fix this error. There's a function Getvalues() in Javascript code that runs fine for the first text box with ID = sq1, whenever onchange event is called. More precisely, its only working for the textbox with id=sq1, e.g if I swap the ids, it works for that box. So basically I want it to work with all onchange events. As I am learning the basics, I would appreciate any help.

<script  type="text/javascript">

		var b1,b2,b3 = 5;
		function Result(FLAG)
		{
			switch(FLAG)
			{
				case 0:
					alert("[Symbol=0]");
			}
		}
		function Test()
		{

			if(b1==0 && b2==0 && b3==0)
			{
				Result(0);					
			}								
			
		}

		function GetValues()
		{
			var temp = "";
			var temp2 =5;			
			for (var i=1; i<=9; i++)
			{
				temp = "sq"+i;				
				if (document.getElementById(temp).value != "" && document.getElementById(temp).value != null )
				{
					temp2 = parseInt(document.getElementById(temp).value);
					alert(temp2);				
				}
				if(temp2==0 || temp2==1)
				{
					switch(i)
					{
						case 1:									
							b1=temp2;							
						break;
						case 2:																	
							b2=temp2;
						break;
						case 3:									
							b3=temp2;
						break;					
					}
				Test();
				}
			} 				
		}
</script>

<HTML>	
	<TITLE>TEST Program</TITLE>
	<HEAD><h3 align="center">TEST Program</h3></HEAD>
	<BODY>				
		<FORM>
			<TABLE border= "1" align ="center" width = "30%" height="50%">
				<tr>
					<td><input type="text" id="sq1" style= "font-size:50pt; text-align:center; width:100%; height:100%" onchange = "GetValues()" ></td>	

					<td><input type="text" id="sq2" style= "font-size:50pt; text-align:center; width:100%; height:100%" onchange = "Getvalues()" ></td>	

					<td><input type="text" id="sq3" style= "font-size:50pt; text-align:center; width:100%; height:100%"onchange = "Getvalues()" ></td>
				</tr>			
								
			</TABLE>
		</FORM>		
	</BODY>
</HTML>

Since you say you're just learning the basics, I'd suggest switching your reading material - whatever book or blog you're using appears to be outdated, just based on the capitalized elements and the deprecated table attributes. Also, you've got some invalid items, like your title being outside the head, and your h3 being inside the head instead of the body. — Joe Enos
– Joe Enos, Commented Apr 3, 2015 at 17:20
I like to use books as my reference material than blogs or online content. It would be very disappointing for you to know that I am learning using my notes made in my web engineering class. Guess my teacher is a orthodox. What book do you suggest for HTML and JavaScript. I am not willing to use CSS or php atm. — Umar Muzammil
– Umar Muzammil, Commented Apr 5, 2015 at 14:30

Don Bottstein · Accepted Answer · 2015-04-03 17:13:26Z

1

Your onchange event is calling GetValues() for sq1, but Getvalues() for sq2 and sq3.

answered Apr 3, 2015 at 17:13

Don Bottstein

1,66013 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Junior Dev · Accepted Answer · 2015-04-03 17:27:53Z

1

Don Bottstein appears to be right, your GetValues() function is misspelled in some tags in your HTML.

An easier way to do this than attaching a function to each tag in the HTML would be event propagation. That is, attach an event to the parent, then use an if statement to figure out if the thing being changed is an input, and call the GetValues() function on it then.

Something like;

<tr id="values"> //  Add an ID to the TR tag in the HTML

document.getElementById("values").addEventListener("change", function(e) {
    //  e is the object that's triggering the event
    if (e.target.type === "text") {
            GetValues();
        }
    })

answered Apr 3, 2015 at 17:27

Junior Dev

11410 bronze badges

Collectives™ on Stack Overflow

JavaScript function not called for all events

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related