0

我正在尝试制作一个像这样的简单计算器：

输入1 选择输入2 = 输入3

  • input1,input2 是第一个和第二个值
  • 选择有 4 个运算符：+ - * /
  • input3 显示结果

这是我的代码，它没有按预期工作，有人可以帮我吗？

<?php
ini_set('display_errors', 0);
session_start();

/*  Check if form is submit 
 *  if any input field is empty --> "NaN" result
 *  else check value of select field --> do the math --> result
 *  Then call JS function to change value of result field
 */ 

if(isset($_GET['act']) && $_GET['act']== 'do')  {

    $val1 = $_GET['val1'];
    $val2 = $_GET['val2'];
    $oper = $_GET['oper'];
if($val1 == NULL || $val2 == NULL)  
    $result= "NaN";
else    {
    switch($oper)   {
        case 1 : $result= $val1 + $val2; break;
        case 2 : $result= $va1l - $val2; break;
        case 3 : $result= $val1 * $val2; break;
        case 4 : $result= $val1 / $val2; break;
    }
}
echo "<script> showResult('".$result."') </script>";
}
?>

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
input,select { height:30px;width:50px}

</style>



</head>
<body>
<form method="GET" action="bai4_1.php?act=do">
    <table>
    <tr><td>Op1</td>
        <td>Oper</td>
        <td>Op2</td>
        <td>Result</td></tr>
    <tr><td><input id="val1" type="text" name="val1" value="<?php echo 
$_GET['val1'];?>"/></td>
        <td><select id="oper" name="oper">
            <option value=1>+</option>
            <option value=2>-</option>
            <option value=3>*</option>
            <option value=4>/</option>
            </select></td>
        <td><input id="val2" type="text" name="val2" value="<?php 
echo$_GET['val2'];?>"/> =</td>         
        <td><input id="result" type="text"></td></tr>
    </table>
</form>
</body>
</html>


<script>
$("input,select").change(function(){
setTimeout(function(){
    $("form").submit();
},1000);
});

function showResult(result) {
$("#result").val(result);
}   
</script>
4

2 回答 2

2

首先知道你想为你的应用程序使用什么语言。

我看到你使用 PHP、HTML、JavaScript 和 jQuery。

但是，如果您重新考虑您的小型应用程序，您（可能）会注意到您可以在客户端执行所有操作。所以你可以扔掉你的PHP。

所以现在我们需要 HTML 来显示一个表单。

<form>
    <table>
        <tr>
            <td>Op1</td>
            <td>Oper</td>
            <td>Op2</td>
            <td>Result</td>
        </tr>
        <tr>
            <td>
                <input id="val1" type="text" name="val1" value="" />
            </td>
            <td>
                <select id="oper" name="oper">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
            </td>
            <td>
                <input id="val2" type="text" name="val2" value="" />
            </td>
            <td>
                <input id="result" type="text" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <input type="submit" />
            </td>
        </tr>
    </table>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

在您的 HTML 中，我编辑了一些内容：

  • 我添加了一个input type="submit"，我们不能假设用户能够在没有的情况下发送表单。
  • 我还更改了您的选择框的值

现在表格已经准备好了。

稍微了解一下 jQuery，我们就可以轻松地捕捉到提交事件。

$('form').submit(onFormSubmit)

function onFormSubmit() {
    var val1 = $('#val1').val()
    var val2 = $('#val2').val()
    var operator = $('#oper').val()

    $('#result').val(eval(val1 + operator + val2))
    return false
}

上面解释过，我在 from 上有一个事件监听器。

提交后，我得到 3 个值。

我使用 eval 将字符串用作代码，这样我就可以做到eval(val1 + operator + val2)

我希望这能帮到您。

在此处包含一个jsFiddle 示例。

于 2013-03-05T15:08:05.133 回答
0

加载页面时，您可能会遇到 JavaScript 错误。目前，您页面的源代码输出可能如下所示：

<script> showResult('".$result."') </script>
<html>
...
</html>
<script>
...
function showResult(result) {
$("#result").val(result);
}   
</script>

这里有两个问题：

你不应该有任何东西，甚至<script>，在你的<html>标签之外。

你可以把这些东西移到<head>标签中，让它看起来更好用。将东西放在<html>标签之外被认为是不好的做法。

您在定义 JavaScript 函数之前调用它。

第一行 JavaScript 尝试执行您的ShowResult函数。但是，这还没有定义（它在页面底部定义，JavaScript 还没有读取它），所以它不知道该怎么做。这会导致错误。如果您使用的是 Google Chrome 或 Firefox，则可以通过按 Control-Shift-J 查看此错误消息。

修复

首先，将所有 JavaScript 代码移动到<head>页面中。

其次，首先编写你的函数。这会将它们定义为页面加载，因此一旦您开始执行功能，一切都可用。

第三，当您使用 jQuery 时，将您的函数执行代码（即：）包装showResult('".$result."')在以下代码中：

$(document).ready(function() {
    // put your code here
});

这将指示您的代码在开始执行任何 JavaScript 之前等待整个页面加载。

结果应如下所示：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
//  define your functions up here
function showResult(result) {
    $("#result").val(result);
}  

//  define your Procedural code here. This stuff will execute once the page loads completely:
$(document).ready(function() {
    $("input,select").change(function(){
    setTimeout(function(){
        $("form").submit();
    },1000);
    });

    <?php if($result != "NaN") {
    //  Show this code only if $result is defined and valid:
echo "showResult('".$result."');";
?>
});
</script>
于 2013-03-05T15:06:05.527 回答