Kalkulator w JavaScript za pomocą formularza.

pytanie zadane 14 grudnia 2021 w JavaScript przez grzybownik420 Nowicjusz (170 p.)

Jak zrobić kalkulator w JavaScript i html aby wybór działania (np. mnożenie dodawanie) można było wybrać przez liste rozwijajaca sie w formularzu. Na dole to jak probowalem zrobic

<html>

    <head>

        <link rel="stylesheet" href="style22.css">

        <meta charset="utf-8">

    </head>

    <body>

        <div class="div1">

            <h1>Kalkulator</h1>

            <input type="number" id="pole1" placeholder="wybierz 1 liczbe">

                <select name="lista_wynikow">

                    <option id="suma"> + </option>

                    <option id="roznica"> - </option>

                    <option id="mnozenie"> * </option>

                    <option id="iloraz"> / </option>

                </select>

                <input type="submit" value="oblicz" id="submits" onclick="oblicz()">

            <input type="number" id="pole2" placeholder="wybierz 2 liczbe">

            <br/><br/>

           

           

            <script type="text/javascript">

                function suma()

                {

                    var a=parseInt(document.getElementById("pole1").value);

                    var b=parseInt(document.getElementById("pole2").value);

                    var results1=a+b;

                    document.getElementById("show_results").innerHTML=results1;

                }

            </script>

            <div id="wyniki">

            <div id="show_results"> </div>

komentarz 14 grudnia 2021 przez TOWaD Mądrala (6,000 p.)

może coś z tego się przyda

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input id="num1" type="number" value="2">
        <input id="num2" type="number" value="5">
    </div>
    <div>
        <input id="wynik" type="number" disabled >
    </div>
    <div>
        <select name="aa" id="opcja">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
    </div>
    <div>
        <button>oblicz</button>
    </div>
    <script>
        document.getElementsByTagName('button')[0].addEventListener('click',()=>oblicz('num1','num2','wynik','aa'))
        ////////////////////////////////////
        function suma(a, b) { return a + b };
        function roznica(a, b) { return a - b };
        function iloczyn(a, b) { return a * b };
        function iloraz(a, b) { return b != 0 ? a / b : NaN };
        function cases(idSelect, a, b) {
            let opcja=document.getElementById("opcja").value;
            let wynik = 0;
            switch (opcja) {
                case '+': wynik = suma(a, b); break;
                case '-': wynik = roznica(a, b); break;
                case '*': wynik = iloczyn(a, b); break;
                case '/': wynik = iloraz(a, b); break;
                default: wynik=NaN;
            }
            return wynik;
        }
        function oblicz(idInputnum1,idInputnum2,idInputresult,idselectopt){
            let num1 = parseFloat(document.getElementById(idInputnum1).value); //parseFloat(document.getElementById(idInputnum1).value)
            let num2 =parseFloat(document.getElementById(idInputnum2).value); //parseFloat(document.getElementById(idInputnum2).value)
            document.getElementById(idInputresult).value =cases(idselectopt, num1, num2);
        }

    </script>
</body>

</html>

komentarz 17 grudnia 2021 przez VBService Ekspert (253,420 p.)

@grzybownik420, zamień

<select name="lista_wynikow"> 
    <option id="suma"> + </option> 
    <option id="roznica"> - </option> 
    <option id="mnozenie"> * </option> 
    <option id="iloraz"> / </option> 
</select>

<select id="lista_wynikow" name="lista_wynikow"> 
    <option value="suma"> + </option> 
    <option value="roznica"> - </option> 
    <option value="mnozenie"> * </option> 
    <option value="iloraz"> / </option> 
</select>

wtedy w js-ie masz np.:

var action=document.getElementById("lista_wynikow").value;
console.log(action);

2 odpowiedzi

odpowiedź 15 grudnia 2021 przez KlemensGak Bywalec (2,210 p.)

odpowiedź 14 grudnia 2021 przez Wiciorny Ekspert (270,230 p.)

Możesz zaimplementować własną funkcje zbierającą odpowiednią operacje i wtedy wykonać odpowiednie działanie
https://www.tabnine.com/academy/javascript/how-to-use-option-selected-property/

<select id="greet" onchange="getOption(this)">
  <option>Pick your greet</option>
  <option value="hello">Hello</option>
  <option value="goodbye">Goodbye</option>
  <option value="seeYou">See you...</option>
</select>

function getOption(el) {
  const option = el.value;
  if (option === 'esc') return
    console.log(option);
  return option;
}

Podobne pytania

+1 głos

1 odpowiedź 603 wizyt

Przechwycenie danych z formularza input type=radio za pomocą pętli

pytanie zadane 10 sierpnia 2021 w JavaScript przez El Lirón Obywatel (1,320 p.)

0 głosów

2 odpowiedzi 620 wizyt

PHP Wysyłanie danych z formularza za pomocą metody post

pytanie zadane 1 września 2016 w PHP przez Miszo Bywalec (2,100 p.)

0 głosów

1 odpowiedź 3,374 wizyt

Tworzenie tabeli w bazie za pomocą formularza (php)

pytanie zadane 22 lipca 2016 w PHP przez Koncha Bywalec (2,860 p.)

Kalkulator w JavaScript za pomocą formularza.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci