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
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.See also https://stackoverflow.com/a/8064705/4968143
A suggestion.
Instead or if else cascade I think is better to use a switch: