CODEWITHSUNDEEP
javascript
user3312259
user3312259

Reputation: 1

HTML/Javascript calculator with dropdown

       function calculate() {
            try
            {
            var value1 = parseInt(validate(document.getElementById("value1").value.trim()));
            var value2 = parseInt(validate(document.getElementById("value2").value.trim()));
            document.getElementById("result").value = operate(value1, value2);
            }
            catch (err) {
                alert("There was a problem: " + err.messaqge);
            }
        }
            catch (err) {
                alert("There was a problem: " + err.messaqge);
            }
        }

        function operate(value1, value2) {
            if (operator == addition) {
                return value1 + value2;
            } else if (operator == subtraction) {
                return value1 - value2;
            } else if (operator == division) {
                return value1 / value2;
            } else if (operator == multiplication) {
                return value1 * value2;
            }

            function validate(value) {
                if (value == null || value == "") {
                    alert("Required Field");
                    return 0;
                } else if (isNaN(value)) {
                    alert("Must be a Number Field");
                    return 0;
                } else return value;
            }
        }
    </script>
    <title>Title Bar</title>
  </head>
  <body>
      <h2>Calculator</h2>
      <table border="1">
          <tr>
            <td>Value 1: </td>
            <td><input type="text" id="value1" name="value1"/></td>
          </tr>
          <tr>
            <td>Value 2: </td>
            <td><input type="text" id="value2" name="value2" /></td>
          </tr>
          <tr>
            <td>Operator: </td>
            <td><select id="operator">
            <option value="Add">+</option>
            <option value="Subtract">-</option>
            <option value="Multiply">*</option>
            <option value="Divide">/</option>
            </select></td>
          </tr>
          <tr>
            <td>Result: </td>
            <td><input type="text" id="result" name="result" /></td>
          </tr>
      </table>
      <input type="submit" id="btn_sub" name="btn_sub" value="Submit" onclick="calculate()" />
      <input type="reset" id="btn_res" name="btn_res" value="Reset" />
  </body>
</html>

This is for a really basic calculator program. I had it as just addition and it was working, but I am trying to add a dropdown so I can do different operations, and I'm not able to get this to work. It's gotta be just the operate function or the 3rd line in the calculate function, because everything else was working when it was just for addition.

Upvotes: 0

Views: 10181

Answers (2)

rolnn
rolnn

Reputation: 938

You can get the value of the drop down using:

var operator = document.getElementById('operator').value;

Check this example in which I take the operator value and then pass it to operate

http://jsfiddle.net/wE77s/2/

Upvotes: 1

washcloth
washcloth

Reputation: 2896

http://www.echoecho.com/htmlforms11.htm

You are looking for a Drop Down Menu. Once you have that in your java script code see what math symbol is selected in the drop down and perform the calculation.

Upvotes: 0

Related Questions