1 Replies - 700 Views - Last Post: 21 March 2013 - 10:52 AM

#1 jesders88  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 25-October 12

Event Listener Help

Posted 21 March 2013 - 10:35 AM

<!doctype html>
<head>

   
    <!-- Javascript function declarations -->
    <script type="text/javascript" src="script.js"> </script>
	
 
</head>
<body>
   
      
    <div class="calc">
    <h1>Justin's Calculator</h1>
   
    <!-- form for user input that represents a calculator -->
    <form name="frmCalc" id="frmCalc">
     
       
        <!-- Text Box to enter a numeric value -->
        <input type="text" name="txtNumber" value="" size="20" /><br /><br/>
       
        <!-- Number buttons -->
        <input type="button" value="1" name="btn1" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 1;" />
        <input type="button" value="2" name="btn2" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 2;" />
        <input type="button" value="3" name="btn3" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 3;" />
       
        <!-- Add -->
        <input type="button" value="+" name="btnPlus" onclick="window.add(window.document.frmCalc.txtNumber.value);" /><br/>
       
        <!-- Number buttons -->
        <input type="button" value="4" name="btn4" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 4;" />
        <input type="button" value="5" name="btn5" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 5;" />
        <input type="button" value="6" name="btn6" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 6;" />
       
        <!-- Subtract -->
        <input  type="button" value="-" name="btnMinus" onclick="window.sub(window.document.frmCalc.txtNumber.value);"/><br/>
       
        <!-- Number buttons -->
        <input type="button" value="7" name="btn7" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 7;" />
        <input type="button" value="8" name="btn8" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 8;" />
        <input type="button" value="9" name="btn9" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 9;" >
		<!-- Divide -->
		<input class="implement" type="button" value="/" name="btnDivide" onclick="window.div(window.document.frmCalc.txtNumber.value);" /><br/>
        
		<input type="reset" name="btnReset" value="Clear" />
        
       
        <!-- Number buttons -->
        <input type="button" value="0" name="btn0" onclick="window.document.frmCalc.txtNumber.value = window.document.frmCalc.txtNumber.value + 0;" />
 
        <!--  Decimal -->
        <input class="implement" type="button" value="." name="btnDecimal" onclick="window.dec(window.document.frmCalc.txtNumber.value);"/>
       
        <!-- Multiply -->
        <input class="implement" type="button" value="*" name="btnTimes" onclick="window.mul(window.document.frmCalc.txtNumber.value);" />
       
 
       
<br />
       
       
       
        
       
        <br/><br/>
             
        
        <input type="button" name="btnCalc" value="Calculate" onclick="calc(window.document.frmCalc.txtNumber);" />
    </form>
    </div>
</body>
</html>




		var lastNum = 0;
			var firstVal;
			var secondVal;
		   
			
			var operator = "";
		   
								   
				   
			
			function add(firstVal){
			   
				
				if(firstVal == ""){
					
					window.alert("Enter a value");
				}
				else{
					
					lastNum = parseFloat(firstVal);
					
					operator = "ADD";
					
					window.document.frmCalc.txtNumber.value = ""
				}
			}
					 function sub(secondVal){
			   
		
				if(secondVal == ""){
					
					window.alert("Enter a value");
				}
				else{
				
					lastNum = parseFloat(secondVal);
			   
					operator = "SUBTRACT";
					
					window.document.frmCalc.txtNumber.value = ""
				}
			}
					 function mul(secondVal){
			   
				
				if(secondVal == ""){
					
					window.alert("Enter a value");
				}
				else{
					
					lastNum = parseFloat(secondVal);
			   
					operator = "MULTIPLY";
					
					window.document.frmCalc.txtNumber.value = ""
				}
			}
					 function div(secondVal){
			   
				
				if(secondVal == ""){
					
					window.alert("Enter a value");
				}
				else{
					
					lastNum = parseFloat(secondVal);
			   
					operator = "DIVIDE";
					
					window.document.frmCalc.txtNumber.value = ""
				}
			}
				   
				   
		
			function calc(txtNumber){
				
				if (txtNumber.value == ""){
					
					window.alert("You must enter a value");
				}
				
				else{
					
					if(operator == "ADD"){
						
						txtNumber.value = lastNum + parseFloat(txtNumber.value);
						
						operator = "";
					}
					
									else if(operator == "SUBTRACT"){
						
						txtNumber.value = lastNum - parseFloat(txtNumber.value);
						
						operator = "";
					}
					 
									else if(operator == "MULTIPLY"){
						
						txtNumber.value = lastNum * parseFloat(txtNumber.value);
						
						operator = "";
					}
					 
									else if(operator == "DIVIDE"){
						
						txtNumber.value = lastNum / parseFloat(txtNumber.value);
						
						operator = "";
					}
					else{
						
						window.alert("You must choose a new operation to perform.");
					}
				}
			}
			




So here lies the problem....The calculator works but my teacher wants us to use Event Listeners instead of an Event Handler like onclick

example ----------- ('click', someFunction(), false)


Now my question is how do I do this from what I have already. It's confusing trying to figure this out and I cant figure it out ....Please Help

Is This A Good Question/Topic? 0
  • +

Replies To: Event Listener Help

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2877
  • View blog
  • Posts: 9,548
  • Joined: 12-December 12

Re: Event Listener Help

Posted 21 March 2013 - 10:52 AM

addEventListener('click', someFunction(), false);

would not be the correct syntax; this would be:
addEventListener('click', someFunction, false);

You need to study this feature and make some attempt. If you struggle then come back and post the code that you are struggling with. There is a reference here at MDN.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1