0

私はこのような単純な電卓を作ろうとしています:

入力 1 選択入力 2 = 入力 3

  • input1,input2 は最初と 2 番目の値です
  • select have 4 operator : + - * /
  • 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

You are probably getting a JavaScript error when you load your page. Currently, the source code output of your page probably looks like this:

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

There are two problems here:

You shouldn't have anything, even <script>, outside of your <html> tags.

You can move this stuff into the <head> tags so make it look and work nicer. It's considered bad practice to put things outside of the <html> tags.

You are calling your JavaScript function before you define it.

The first JavaScript line tries to execute your ShowResult function. However, this hasn't been defined yet (it's defined at the bottom of the page, and JavaScript hasn't read it yet), so it doesn't know what to do. This causes an error. If you are using Google Chrome or Firefox, then you can view this error message by hitting Control-Shift-J.

The Fix

First, move all of your JavaScript code into the <head> of your page.

Second, write your functions first. This will define them as the page loads, so everything is available once you start executing functions.

Third, when you use jQuery, wrap your function execution code (i.e.: showResult('".$result."')) in this code:

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

This will instruct your code to wait for the entire page to load before starting to execute any JavaScript.

The result should look something like this:

<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 に答える