HTML / Javascript计算器与下拉列表

时间:2014-02-15 01:24:41

标签: javascript

        

       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>

这是一个非常基本的计算器程序。我只是添加了它并且它正在工作,但我正在尝试添加下拉列表以便我可以执行不同的操作,而且我无法使其工作。它必须只是操作函数或计算函数中的第3行,因为当它只是用于添加时,其他一切都正常工作。

2 个答案:

答案 0 :(得分:1)

您可以使用以下方式获取下拉列表的值:

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

选中此示例,其中我获取运算符值,然后将其传递给operate

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

答案 1 :(得分:0)

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

您正在寻找下拉菜单。在java脚本代码中有了这个后,请在下拉列表中看到选择了什么数学符号并执行计算。