带有选择表单和文本字段的简单计算器

Simple calculator with select form and text fields

本文关键字：简单 计算器 字段 文本 有选择 表单      更新时间：2024-03-17

我试着用select表单和文本字段做一个简单的计算器，但它不起作用。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+".";
}

它没有写这两个数字的结果，我不知道它是否重新打开了它们（对不起我的英语不好）。

您应该得到元素的value

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

您可以简单地使用jQuery：

请参阅演示

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

需要更改的几件事：

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

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

选择已经有值，所以在比较中删除它：

if (selection=="add") {

如果你也错过了，这一行缺少了一个右括号：

var pahot=document.getElementById("less";

你的表单看起来不错，但你的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示例

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

相关文章：