Member Avatar for eo868745

Hello, I'm having a bit of trouble here. I want to have two input boxes for entering numbers, a select box, and a button - "Compute". The select box contains options for "add", "subtract", "multiply" and "divide". When the "Compute" button is pressed, I want it to compute the arithmetic operation selected in the drop down menu and display the output in a table.

This is what I have right now, and it is only computing the last operator which is divide. Any help would be greatly appreciated! Thank you! :)

<html>

<head>
	<title></title>
	
	<script type="text/javascript">

    		var digit = "0123456789";
    		var digitOrDot = digit + ".";
    		var digitDotOrNegative = digitOrDot + "-";

	    	function isOnlyDigit(str)
			{
				for (var i=0; i< str.length; i++)
				    if (digit.indexOf(str.charAt(i)) < 0)
					    return false;
    			return true;
	    	}

	    	function isOnlyDigitOrDot(str)
			{
				for (var i=0; i< str.length; i++)
					if (digitOrDot.indexOf(str.charAt(i)) < 0)
						return false;
    			return true;
	    	}

	    	function isOnlyDigitDotOrNegative(str)
			{
				for (var i=0; i< str.length; i++)
					if (digitDotOrNegative.indexOf(str.charAt(i)) < 0)
						return false;
    			return true;
	    	}

	    	function isValidUnsignedDecimal(str)
		    {
			    if (!isOnlyDigitOrDot(str))
				    return false;
		        var parts = str.split(".");
		        if (parts.length > 2)
		            return false;
		        else
		            return true;
	    	}

	    	function isValidSignedDecimal(str)
		    {
			    if (!isOnlyDigitDotOrNegative(str))
				    return false;
		        var parts = str.split(".");
		        if (parts.length > 2)
		            return false;
		        else
		        {
					parts = str.split("-");
					if (parts.length > 2)
						return false;
					else
					if (str.indexOf("-") > 0)
						return false;
		        }
	            return true;
	    	}

           	function isValidInteger(str)
           	{
               	if (!isOnlyDigit(str))
               	{
                   	return false;
               	}
               	return true;
           	}

           	var focusItem;
           	function setFocus(item) {
           	    focusItem = item
           	    setTimeout("focusItem.focus();", 2000);
           	}
           	
           	function add() 
			{
				var form = document.calculator;
           	    var n1 = document.getElementById("num1");
           	    var n2 = document.getElementById("num2");
           	    var ans = document.getElementById("answer");
				var add = document.getElementById("add");
				var subtract = document.getElementById("subtract");
				var divide = document.getElementById("divide");
				var multiply = document.getElementById("multiply");
				var dropdownlist = form.dropdownlist.value;
				
				if (dropdownlist = "add")
				{
					ans.innerHTML = parseInt(n1.value) + parseInt(n2.value);
				}	
					
				if (dropdownlist = "subtract")
				{
					ans.innerHTML = parseInt(n1.value) - parseInt(n2.value);
				}
				
				if (dropdownlist = "multiply")
				{
					ans.innerHTML = parseInt(n1.value) * parseInt(n2.value);
				}
				
				if (dropdownlist = "divide")
				{
					ans.innerHTML = parseInt(n1.value) / parseInt(n2.value);
				}
           	}


           	function checkNo(box) {
           	    if (!isValidInteger(box.value)) {
           	        alert("Only numbers 0-9 can be entered!");
           	        setFocus(box);
           	    }
           	}
			

	</script>
</head>
<body id="theBody" >

<!--Calculator-->
<form id="calculator" name="calculator" method="get" action="dummy.htm">
<table border="0">
            <tr>
                <td align="right">Number 1:</td>
                <td><input name="num1" id="num1" type="text" 
                    onblur="checkNo(this);" value=""/></td>
                <td align="right">Number 2:</td>
                <td><input name="num2" id="num2" type="text" 
                        onblur="checkNo(this);" value=""/></td>
            </tr>
            
            <tr>
            	<td colspan="4">&nbsp;</td>
            </tr>
                <td>
<input type="button" value="Compute" onclick="add();"/>

<select id="dropdownlist" name="dropdownlist" onchange="add();">
<option id="add" value="add">Add</option>
<option id="subtract" value="subtract">Subtract</option>
<option id="divide" value="divide">Divide</option>
<option id="multiply" value="multiply">Multiply</option>
</select>
                </td>
                <td>&nbsp;</td>
                <td align="right">Answer:</td>
                <td id="answer">&nbsp;</td>

            <tr>
            </tr>
        </table>
        <input type="button" value="Reset Form" onClick="this.form.reset()" />  
    </form>
    
    

    
</body>
</html>
  • 2 Contributors
  • 3 Replies
  • 268 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by ~s.o.s~
Member Avatar for ~s.o.s~

For comparison its == or === [strict type safe equals] and not = [assignment operator].

var op = document.getElementById("someId").value;
switch(op) { //switch by default using === operator
  case "add":
    alert("addition");
    break;
  case "sub":
    alert("subtraction");
    break;
  // and so on
}

You are using an improper way of accessing form elements; read this link for more details.

Member Avatar for eo868745

So I use the switch operator instead of if statements?

Member Avatar for ~s.o.s~

Either of them would do; the point I was trying to put across is that for comparison use the == or === operator instead of = operator. Though, using switch seems to be the logical solution here.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.