skip to Main Content

i tried to programm a calculator in HTML/CSS/JS/PHP, but i´ve got just "0" as my return value, which i gave the variable "ergebnis" in the PHP code. Normaly the result of a calculation should be display on the calculator screen and the js console.
The HTML code is just the optic of the calculator. In the JS-code i tried to make an ajax-request, but i am not sure, if it works, because i can´t echo the content of them in the php script. But normally it should work, because i got the readystate 4 confirmation back.
In the PHP-code i just want to calculate the carried numbers, but the return value is still zero after run the code.
Hope somebody can help me

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Taschenrechner</title>
        <link rel="stylesheet" type="text/css" href="Taschenrechner.css">
    </head>
    <body>

        <div class="aussenDiv">
            <div id="zweiteEbeneaussenDiv">
                
                <form action="Taschenrechner.php" method="get">
                    <input id="eingabefeld" type="text" value="">
                    
                    <div class="ergebnis"></div>
                    <div class="row">
                        <div class="delete">C</div>                 
                    </div>
                    
                    <div class="row">
                        <div class="button number">7</div>
                        <div class="button number">8</div>
                        <div class="button number">9</div>
                        <div class="button operator">/</div>
                    </div>

                    <div class="row">
                        <div class="button number">4</div>
                        <div class="button number">5</div>
                        <div class="button number">6</div>
                        <div class="button operator">*</div>
                    </div>
                    <div class="row">
                        <div class="button number">1</div>
                        <div class="button number">2</div>
                        <div class="button number">3</div>
                        <div class="button operator">-</div>
                    </div>
                    
                    <div class="row">
                        <div class="button komma">.</div>
                        <div class="button number">0</div>
                        <div  id="orangeZeichen" class="button">=</div>
                        <div class="button operator">+</div>
                    </div>

                </form>
            </div>
        </div>

    
    </body>
    <script src="JS_TR_neu.js"></script>
</html>

let number1 = "";
let number2 = "";
let orangeZeichen = 0;
let operator = "";
let komma = "";
let ergebnis = "";

//Zuweisung des Operators
document.querySelectorAll(".operator").forEach(element => {

    element.addEventListener("click", () => {
        console.log(element.innerHTML);
        document.querySelector("#eingabefeld").value += element.innerHTML;
        operator = element.innerHTML;
    })
})



//Zuweisung der Zahlen
document.querySelectorAll(".number").forEach(element => {

    element.addEventListener("click", () => {
        console.log(element.innerHTML);
        document.querySelector("#eingabefeld").value += element.innerHTML;

        if (operator === ""){
            number1 = element.innerHTML;
            console.log("Zahl1: ", number1);
        }else{
            number2 = element.innerHTML;
            console.log("Zahl2: ", number2);
        }
    })
})



//AJAX-Request


    //Gleichheitszeichen
    document.querySelector("#orangeZeichen").addEventListener("click", () => {

        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && this.status === 200){
                console.log("readystate suceed: " + this.readyState);
                var response = JSON.parse(xhr.responseText); //Verarbeitet responseText zu JS Objekt
                console.log("Response: ", response);
                document.querySelector("#eingabefeld").value += response;
            }
        }


        xhr.open("GET", "Taschenrechner.php");
        
        var parameters = "number=" + encodeURIComponent(number1) + 
                        "&number=" + encodeURIComponent(number2) + 
                        "&operator=" + encodeURIComponent(operator);
        
        
        xhr.send(parameters);

        
        
    })

<?php
  
    $number1 = $_GET["number1"];
    $number2 = $_GET["number2"];
    $operator = $_GET["operator"];
    
    if (isset($number2)){
    echo $number1;
    echo $number2;
    echo $operator;
    }
    $erg = 0;
    if ($operator === "+"){        
        $erg = (float) $number1 + (float) $number2;
    }elseif($operator === "-"){
        $erg = (float) $number1 - (float) $number2;
    }elseif($operator === "*"){
        $erg = (float) $number1 * (float) $number2;
    }elseif($operator === "/"){
        $erg = (float) $number1 / (float) $number2;
    }
    echo json_encode("=".$erg);
?>

2

Answers


  1. You try to use a GET request with a request body, which isn’t working (see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send for detailed info).

    You should try to append your parameters within the xhr.open call.

     var parameters = "number=" + encodeURIComponent(number1) + 
                        "&number=" + encodeURIComponent(number2) + 
                        "&operator=" + encodeURIComponent(operator);
    
     xhr.open("GET", "Taschenrechner.php?" + parameters);
     xhr.send(null);
    

    See also https://stackoverflow.com/a/8064705/4968143

    Login or Signup to reply.
  2. A suggestion.
    Instead or if else cascade I think is better to use a switch:

    $erg = 0;
    switch($operator){
        case "+":  $erg = (float) $number1 + (float) $number2; break;
        case "-":  $erg = (float) $number1 - (float) $number2; break;
        case "*":  $erg = (float) $number1 * (float) $number2; break;
        case "/":  $erg = (float) $number1 / (float) $number2; break;
    }
    echo json_encode("=".$erg);
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search