Question

我尝试用选择表单和文本字段做一个简单的计算器，它不起作用。 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="cssFile.css" />
    <script src="jsFile.js"></script>
</head>
<body>
    <p>Hello! Please put two numbers below and choose action:</p>
    <p>
    <input type="text" id="firstNum" />
    <select id="fallDown">
    <option>Choose</option>
    <option value="add" id="add">+</option>
    <option value="less" id="less">-</option>
    <option value="times" id="times">*</option>
    <option value="howin" id="howin">/</option>
    <input type="text" id="secNum" /><br>
    <button onclick="calcuMath()">Result here!</button>
    <p id="result"></p>
<body>
</html>

JS：

function calcuMath(){
    var z;
    var x=document.getElementById("firstNum");
    var y=document.getElementById("secNum");
    var sel=document.getElementById("fallDown");
    var selection=sel.options[sel.selectedIndex].value;
    var more=document.getElementById("add");
    var pahot=document.getElementById("less";
    var kaful=document.getElementById("times");
    var hiluk=document.getElementById("howin");
    if(selection.value=="add"){
        z=x+y;
    }
    document.getElementById("result").innerHTML="The result is "+z+".";
}

它没有写出两个数字的结果，我不知道它是否甚至rekon他们（抱歉我的英语不好）。

Answer 1

你应该得到value元素

var x = document.getElementById("firstNum").value;

您可以简单地使用jQuery：

参见 DEMO

$("#calc").on("click", function(){

    switch($("#fallDown").val())
    {
        case "add":{
    $("#result").html(
        parseFloat($("#firstNum").val())+parseFloat($("#secNum").val())
    );}
            break;
            //etc
    }
});

Answer 2

您需要更改的一些事项：

从输入框中获取值并从中解析数字：

var x = parseFloat(document.getElementById("firstNum").value);
var y = parseFloat(document.getElementById("secNum").value);

选择已经具有值，因此在比较中将其删除：

if (selection=="add") {

如果您错过了它，则此行上缺少右括号：

var pahot=document.getElementById("less";

Answer 3

你的表格似乎很好，但你的JS应该是：

function calcuMath() {
    var z;
    var x = document.getElementById("firstNum").value; // NEED .value
    var y = document.getElementById("secNum").value; // NEED .value
    var sel = document.getElementById("fallDown");
    var selection = sel.options[sel.selectedIndex].value;
    var more = document.getElementById("add");
    var pahot = document.getElementById("less");
    var kaful = document.getElementById("times");
    var hiluk = document.getElementById("howin");
    if (selection == "add") { // Remove .value
        z = parseFloat(x) + parseFloat(y); // Convert from strings to floats
    }
    document.getElementById("result").innerHTML = "The result is " + z + ".";
}

<强> jsFiddle example

Answer 4

JavaScript内置了数学！为什么要为解释语言构建解释器？

HTML

Math: <input id="math" type="text"/><br><br>
Result: <p id="result"></p>

JS

document.getElementById('math').oninput = function () {
    if (!(/^[A-z]+$/g.test(this.value))) {
        document.getElementById('result').innerHTML = eval(this.value);
    } else {
        document.getElementById('result').innerHTML = 'Illegal character.';
    }
}

JSFiddle：http://jsfiddle.net/howderek/7Wa94/#base

选择形式和文本字段的简单计算器

4 个答案: