kalkulator js

pytanie zadane 22 kwietnia 2019 w JavaScript przez xFanti Obywatel (1,350 p.)

hej właśnie zacząłem naukę js i postanowiłem zrobic projekt kalkulatora. Jenak nie funkcjonuje jak powinien pomoże mi ktoś

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script type="text/javascript">
    
    var wartosc1 = document.getElementById("pole1").value;
    var wartosc2  = document.getElementById("pole2").value;
    var znak  = document.getElementById("znak").value;
    
    function dzialanie()
    {
    if(znak == '+')
    {
       var wynik = wartosc1 + wartosc2;
       document.getElementById("pole3").innerHTML = wynik;
    }
    else if (znak == '-')
    {
       var wynik = wartosc1 - wartosc2;
       document.getElementById("pole3").innerHTML = wynik;
    }
    else if (znak == '*')
    {
       var wynik  = wartosc1*wartosc2;
       document.getElementById("pole3").innerHTML = wynik;
    }
    else if(znak == '/')
    {
       var wynik = wartosc1/wartosc2;
        document.getElementById("pole3").innerHTML = wynik;
    }
    }
    </script>
</head>
<body>
    <h1>Kalkulator</h1>
  <input type="text" id="pole2">
  <input type="text" id="pole2">
  <select id="znak">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
      </select>
      <input type="submit" id="przycisk" value="oblicz" onclick="dzialanie()">
    <h2>Wynik to :<span id="pole3"></span></h2>
</body>
</html>

1 odpowiedź

odpowiedź 22 kwietnia 2019 przez Velta Maniak (52,010 p.)

Bo próbujesz wykonywać operacje na ciągach znaków, a nie na liczbach. Nie prościej będzie pobierać tylko liczby i użyć funkcji eval()?

Przy okazji: poczytaj o HTML5. Nie ma co się męczyć.

komentarz 22 kwietnia 2019 przez xFanti Obywatel (1,350 p.)

jak na ciągach znaków skoro pobieram wartość

komentarz 22 kwietnia 2019 przez wiktoz Mądrala (7,040 p.)

Znaki +,-,*,/ są traktowane jako tekst (string), więc nie wykona się działanie np. 5(int) -(string) 2(int), bo komputer nie będzie wiedział o co Ci chodzi. Właśnie do tego służy funkcja eval(), żeby wykonać ten ciąg znaków jako polecenie js.

komentarz 22 kwietnia 2019 przez Velta Maniak (52,010 p.)

Pobierasz wartość typu string. Parametr value z kontrolki typu text zwraca wartość jako ciąg znaków.

komentarz 22 kwietnia 2019 przez xFanti Obywatel (1,350 p.)

Idzie mi to strasznie opornie ale zasugerowałem sie toba i dalej nie dziala

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script type="text/javascript">
    
    var wartosc1 = document.getElementById("pole1").value;
    var wartosc2  = document.getElementById("pole2").value;
    var znak  = document.getElementById("znak").value;
    
    function dzialanie()
    {
    if(znak == '+')
    {
       var wynik = console.log(eval('wartosc1 + wartosc2'));
       document.getElementById("pole3").innerHTML = wynik;
    }
    else if (znak == '-')
    {
       var wynik = console.log(eval('wartosc1 - wartosc2'));
       document.getElementById("pole3").innerHTML = wynik;
    }
    else if (znak == '*')
    {
       var wynik  = console.log(eval('wartosc1 * wartosc2'));
       document.getElementById("pole3").innerHTML = wynik;
    }
    else if(znak == '/')
    {
       var wynik = console.log(eval('wartosc1 / wartosc2'));
        document.getElementById("pole3").innerHTML = wynik;
    }
    }
    </script>
</head>
<body>
    <h1>Kalkulator</h1>
  <input type="number" id="pole2">
  <input type="number" id="pole2">
  <select id="znak">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
      </select>
      <input type="submit" id="przycisk" value="oblicz" onclick="dzialanie()">
    <h2>Wynik to :<span id="pole3"></span></h2>
</body>
</html>