Wprowadzanie dowolnej ilości liczb w kalkulatorze do obliczenia w kalkulatorze

pytanie zadane 12 czerwca 2020 w PHP przez Martita Bywalec (2,520 p.)

Jak zrobić kalkulator w którym użytkownik mógłby wprowadzać dowolną ilość liczb do obliczenia?
Chciałabym to zrobić na 4 sposoby
I sposób
Wprowadzanie działania w jednym polu input.

II sposób
Użytkownik klika w dodaj pole i wpisuje kolejną liczbę do obliczenia.

Umiem zrobić kalkulator, gdzie można wprowadzić 2 liczby do obliczenia np. 2 + 2. Szukałam w internecie i nie znalazłam.

Proszę o pomoc.

<form method="POST" action="">
<h2>Kalkulator</h2>
<input type="text" name="liczba1" size="10">
<select name="znak">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" name="liczba2" size="10">
<input type="submit" value="Oblicz">
</form>

<?php
$liczba1 = $_POST['liczba1'];
$znak = $_POST['znak'];
$liczba2 = $_POST['liczba2'];

$wynik = "";
switch ($znak)
{
 case "+":
   $wynik = $liczba1+$liczba2;
   break;
 case "-":
   $wynik = $liczba1-$liczba2;
   break;
 case "*":
   $wynik = $liczba1*$liczba2;
   break;
 case "/":
   $wynik = $liczba1/$liczba2;
   break;
}
echo $liczba1;
echo " ";
echo $znak;
echo " ";
echo $liczba2;
echo " ";
echo "= ";
echo $wynik;
?>

komentarz 12 czerwca 2020 przez VBService Ekspert (255,800 p.)
edycja 12 czerwca 2020 przez VBService

Chciałabym to zrobić na 4 sposoby
I sposób
Wprowadzanie działania w jednym polu input.

II sposób
Użytkownik klika w dodaj pole i wpisuje kolejną liczbę do obliczenia.

... a gdzie propozycja 3-go i 4-go sposobu?

A tak poważnie może to być pisane tak po prostu w polu <input>?

Demo on-line.


<form method="POST" action="">
  <h2>Kalkulator</h2>
    <input type="text" name="oblicz_dane" placeholder="wprowadż liczby np.: (2+8) - 3">
    <input type="submit" value="oblicz">
</form>

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
input[type="text"] {
  font-family: 'Press Start 2P', cursive;
  width: 400px;
  height: 20px;
  font-size: 14px;
  font-weight: normal;
  color: limegreen;
  background-color: black;
  margin: 5px;
  padding: 5px 10px;
  border: 0px;
  font-variant: small-caps;
  letter-spacing: 1px;
  box-shadow: 0 0 3px #000000, 0 0 5px #000011;
}
input[type=submit]{
  height: 30px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  box-shadow: 0 0 3px #000000, 0 0 5px #000011;
}
input[type=submit]:hover {
  color: limegreen;
}
input[type=submit]:active {
            box-shadow: 0 0 3px #000000, 0 0 5px limegreen;
            transform: translateY(2px);
}
::-webkit-input-placeholder {
  font-family: arial;
  font-size: 12px;
  color: gray;
}
::-moz-placeholder { /* Firefox 19+ */
  font-family: arial;
  font-size: 12px;
  color: gray;
}
:-ms-input-placeholder { /* IE 10+ */
  font-family: arial;
  font-size: 12px;
  color: gray;
}
</style>

Jeżeli tak to dopisze jak pobrać tak zapisane dane i wykonać działanie matematyczne.

komentarz 12 czerwca 2020 przez Martita Bywalec (2,520 p.)

Ja chce zrobić kalkulator taki jak na stronie https://www.matemaks.pl/kalkulator.html

Tam wpisujesz w pole np. 2 + 2 i wyświetla się wynik .

III sposób

Ja chce zrobić kalkulator taki jak na stronie https://www.matemaks.pl/kalkulator.html tylko wynik wyświetla się dopiero po kliknięciu oblicz.

Jak to zrobić?

komentarz 12 czerwca 2020 przez VBService Ekspert (255,800 p.)

Czyli dane wprowadzane do jednego <input>'a, z tą różnicą, że Ty chcesz obliczenia wykonać w php'ie, a nie jak na podanej stronie.

PrintSrc - zrobiony ze strony www.matemaks.pl

komentarz 12 czerwca 2020 przez Martita Bywalec (2,520 p.)

Tylko ja to potrzebuje zrobić w PHP

komentarz 12 czerwca 2020 przez Martita Bywalec (2,520 p.)

Jak to zrobić?

komentarz 13 czerwca 2020 przez Martita Bywalec (2,520 p.)

Tak możesz dopisać resztę kodu żeby to działało?

2 odpowiedzi

odpowiedź 13 czerwca 2020 przez VBService Ekspert (255,800 p.)
edycja 18 października 2020 przez VBService

Najlepsza

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
</head>
<body>

<form method="POST" name="form_oblicz_dzialanie" action="oblicz_dzialanie.php">

    <h2>Kalkulator</h2>
    <p>Wpisz działanie :</p>
    <p>Dozwolone znaki: + - * / ( ) np.: (7+3.45)*3.257+(5-6)</p>
    <input type="text" id="oblicz_dzialanie" name="oblicz_dzialanie" style="width: 300px">
    <input type="button" onclick="f_oblicz_dzialanie_submit()" value="Oblicz">
  </form>

  <script>
    window.onload = function() {
        // wstawiamy kursor do inputa
        document.getElementById("oblicz_dzialanie").focus();
    };

    function f_oblicz_dzialanie_submit() {
        // Przed wysłaniem danych z formularza spradzamy
        // czy nie jest wysyłane puste pole lub z wpisanymi spacjami
        // na poczatku i na końcu łancucha
        var dzialanie = document.getElementById("oblicz_dzialanie").value.trim();
        if(dzialanie != "") {
            // Coś jest - wysyłamy ;-)
            document.form_oblicz_dzialanie.submit();
        } else {
            // czyścimy pole input i wstawiamy kursor
            document.getElementById("oblicz_dzialanie").value = "";
            document.getElementById("oblicz_dzialanie").focus();
        }

    }
  </script>
</body>
</html>

oblicz_dzialanie.php

<?php

    if(isset($_POST['oblicz_dzialanie'])) {
        $oblicz_dzialanie = trim($_POST['oblicz_dzialanie']);

        if(! empty($oblicz_dzialanie)) {
            try {
                // https://www.w3schools.com/php/phptryit.asp?filename=tryphp_func_regex_preg_replace
                // Z przysłanego ciągu znakó wywalamy wszystko: litery, spacje ,^, % $ itd.
                // zostawiając liczby i ( ) + * - /
                // testowy: ' (( 7+3.45 ) ) * 3.25sel 7 + a (5-6)!@# $%^&'
                // wynik: (7+3.45)*3.257+(5-6)
                // znak \x20, \x58 ... itp. kody ascii zapis hex
                $pattern = '/[a-zA-Z\x20-\x27\x3A-\x40\x5B-\x60\x7B-\x7E]/i';
                $dzialanie = preg_replace($pattern, '', $oblicz_dzialanie);
                for($i=42; $i<48; $i++) {
                    // redukujemy dublujące się znaki dozwolone np.: ++ -> +
                    $dzialanie = str_replace(chr($i).chr($i), chr($i), $dzialanie);
                }

                try {
                    ob_start();
                    eval("echo ".$dzialanie.";");
                    $wynik = ob_get_clean();
                } catch (ParseError $e) {
                    $wynik = "<span style='color: red'>nieprawidłowy zapis działania</span>.";
                }
            } catch (Exception $e) {
                $wynik = "<span style='color: red'>nieprawidłowy zapis działania</span>.";
            }
        } else {
            $wynik = "Brak danych do obliczenia";
        }
    } else {
        $wynik = "Brak danych do obliczenia";
    }

    echo "<p>Podane działanie: ".$oblicz_dzialanie."</p>";
    echo "<p>Działanie po usunięciu niedozwolonych znaków: ".$dzialanie."</p>";
    echo "<p>Wynik działania: ".$wynik."</p>";
    echo "<p>".$dzialanie." = ".$wynik."</p>";

    // kolorujemy zapis ;-)
?>
    <style>
        .wynik {
            background-color: black;
            color: white;
            font-family: Tahoma;
            font-size: 13px;
            width: 300px;
            padding: 5px 10px;
            font-weight: bold;
            letter-spacing: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .znak_mnozenie {
            font-family: serif;
            color: yellow;
            font-size: 100%;
            font-style: normal;
            font-weight: bold;
        }
        .znak_dzielenia {
            color: green;
        }
        .znak_plus, .znak_minus {
            color: tomato;
        }
    </style>
<?php

    // kolorujemy zapis ;-)

    $style = "<span class='znak_dzielenia'>/</span>";
    $dzialanie = str_replace("/", $style, $dzialanie);

    for($i=42; $i<46; $i++) {
        switch(chr($i)) {
            case '*':
                $style = "<span class='znak_mnozenie'>×</span>";
                $dzialanie = str_replace(chr($i), $style, $dzialanie);
            break;
            case '+':
                $style = "<span class='znak_plus'>".chr($i)."</span>";
                $dzialanie = str_replace(chr($i), $style, $dzialanie);
            break;
            case '-':
                $style = "<span class='znak_minus'>".chr($i)."</span>";
                $dzialanie = str_replace(chr($i), $style, $dzialanie);
            break;
        }
    }

    echo "<p class='wynik'>".$dzialanie." = ".$wynik."</span>";
?>