PHP制作一個簡單的計算器 - 代碼不起作用

Question

我想制作一個這樣的簡單計算器：

input1選擇input2 = input3

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>

Answer 1

首先要知道您想要為您的應用程序使用哪種語言。

我看到你使用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示例。

Answer 2

加載頁面時可能會收到JavaScript錯誤。 目前，頁面的源代碼輸出可能如下所示：

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

這里有兩個問題：

你的<html>標簽之外不應該有任何東西，甚至是<script> 。

您可以將這些內容移動到<head>標記中，以使其外觀和工作更好。 把東西放在<html>標簽之外被認為是不好的做法。

在定義JavaScript函數之前，您正在調用它。

第一個JavaScript行嘗試執行ShowResult函數。 但是，這還沒有定義（它在頁面底部定義，JavaScript還沒有讀過它），因此它不知道該怎么做。 這會導致錯誤。 如果您使用的是谷歌瀏覽器或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>

PHP制作一個簡單的計算器 - 代碼不起作用

問題描述

2 個解決方案

解決方案1
2 2013-03-05 15:08:05

解決方案2
0 2013-03-05 15:06:05

修復

PHP制作一個簡單的計算器 - 代碼不起作用

問題描述

2 個解決方案

解決方案1 2 2013-03-05 15:08:05

解決方案2 0 2013-03-05 15:06:05

修復

解決方案1
2 2013-03-05 15:08:05

解決方案2
0 2013-03-05 15:06:05