CODEWITHSUNDEEP
javascripthtml
Umar Muzammil
Umar Muzammil

Reputation: 13

JavaScript function not called for all events

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>

Upvotes: 0

Views: 50

Answers (2)

Junior Dev
Junior Dev

Reputation: 114

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();
        }
    })

Upvotes: 1

Don Bottstein
Don Bottstein

Reputation: 1660

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

Upvotes: 1

Related Questions