Jak napisać kalkulator w html?

pytanie zadane 6 grudnia 2020 w HTML i CSS przez Kaspaa Nowicjusz (130 p.)

Witam, mam zadanie, żeby zrobić prosty kalkulator, który bedzie na stronie html. Znalazłem kalkulator w js w internecie, lecz kiedy dodam go do mojego skryptu to przestaje działać. Może mi ktoś powiedzieć jak mam to napisać aby wykonywało kilka prostych działań w html?
Podaje cały skrypt, lecz chodzi mi o miejsce obok: Liczba A i B. Dzieki!

<!DOCTYPE html>
<html lang="pl">
    <link rel="stylesheet" href="style.css" 
			type="text/css" />	
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Działania matematyczne</title>
    </head>
    
    
<body>

<div id="container"></div>
    
     <div id="logo">
        <img src="obrazy/logo.jpg" alt="Matematyka" width="auto" height="100 px"/>
    </div>

    <div id="title">
        <h1>Pomocnik Matematyczny</h1>
    </div>
    
   <div id="dzialania">
       <a href="dzialania.html">Działania</a>
   </div>
   
    <div id="tabliczka">
         <a href="mnozenie.html">Tabliczka mnożenia</a>
    </div>
    
    <div id="lista">
        <ul>
          <li>dodawanie</li>
          <li>odejmowanie</li>
          <li>mnożenie</li>
          <li>dzielenie</li>
          <li>potęgowanie</li>
        </ul>
    
    </div>
    
    <div id="lewy">
       <br>
        <span style="font-size: 20px">  <b><h3>Proste działania</h3></b></span> <br>
        
        Liczba A: <input type="number" id="a"> <br>
        Liczba B: <input type="number" id="b"> <br>
        
        <input type="submit" value="+" id="dodawanie"     onclick="dodawanie()" />
        
        <input type="submit" value="-" id="odejmowanie"   onclick="odejmowanie()" />
        
        <input type="submit" value="*" id="mnozenie"      onclick="mnozenie()" />
        
        <input type="submit" value="/" id="dzielenie"     onclick="dzielenie()" />
        
        <input type="submit" value="A^B" id="potegowanie"   onclick="potegowanie()" />
        
    </div>
    
    
    
    <div id="stopka">
        Autor: xxx
        
    </div>
   
   
</body>
    
</html>

2 odpowiedzi

odpowiedź 7 grudnia 2020 przez SzkolnyAdmin Szeryf (86,360 p.)

Starutkie zadanie z egzaminu E14. Pokaż skrypt, pewnie uchwyty skrypcie nie pasują do identyfikatorów pól,

komentarz 7 grudnia 2020 przez Kaspaa Nowicjusz (130 p.)

W internecie znalazłem coś takiego, ale nie mam pojęcia jak to dołączyć, żeby działało i jak dopisać kolejne działania.

var liczba1 = document.getElementById("liczba1").value;
var liczba2 = document.getElementById("liczba2").value;
var wynik = "";

function dodawanie() {
    wynik = liczba1 + liczba2;
    document.getElementById("wynik").innerHTML = wynik;
}

komentarz 7 grudnia 2020 przez VBService Ekspert (252,660 p.)
edycja 7 grudnia 2020 przez VBService

Zobacz jak trzeba "używać" document.getElementById(...), to wydaję Mi się, że sam się domyślisz jak "sprawić", żeby kod zadziałał.

[ .getElementById - 1 ] [ .getElementById - 2 ] [ .innerHTML ]

... i co ...


var liczba1 = document.getElementById("TU POPRAWIĆ").value;
var liczba2 = document.getElementById("I TU POPRAWIĆ").value;

... gdy masz, w Twoim kodzie (id=?)...


Liczba A: <input type="number" id="a"> <br>
Liczba B: <input type="number" id="b"> <br>

... no i nie masz tego elementu w kodzie html: ...("wynik")... = wynik;

odpowiedź 7 grudnia 2020 przez VBService Ekspert (252,660 p.)
edycja 8 grudnia 2020 przez VBService

Podaje cały skrypt, ...

To co podałeś to właściwie "wygląd" (layout) kalkulatora, kod html. Nie podałeś kodu js-a, który jak piszesz

Znalazłem kalkulator w js w internecie, lecz kiedy dodam go do mojego skryptu to przestaje działać.

Na początek Moja sugestia do "obsługi" działań matematycznych powinna wystarczyć jedna funkcja, bo u Ciebie jest teraz:
dodawanie(), odejmowanie() itd.

<input type="submit" value="+" id="dodawanie" 
  onclick="dodawanie()" />
         
<input type="submit" value="-" id="odejmowanie" 
  onclick="odejmowanie()" />
         
<input type="submit" value="*" id="mnozenie" 
  onclick="mnozenie()" />
         
<input type="submit" value="/" id="dzielenie"
  onclick="dzielenie()" />
         
<input type="submit" value="A^B" id="potegowanie"
  onclick="potegowanie()" />

Moja sugestia: (nazwa funkcji i poleceń - dowolna)

<input type="submit" value="+" id="dodawanie" 
  onclick="oblicz('dodawanie')" />
         
<input type="submit" value="-" id="odejmowanie" 
  onclick="oblicz('odejmowanie')" />

. . . itd

 . . .

function oblicz(polecenie) {

    . . .

    switch(polecenie) {
        case 'dodawanie':
            . . .
        break;
        case 'odejmowanie':
            . . .
        break;
            . . . itd.
    }
}

Druga Moja sugestia to element <input type="submit">, używa się raczej przy tworzeniu np.: formularzy na stronie, choć użycie go w tym kontekście, też nie jest błędem. Proponuję użyć <button>


. . .

<button id="dodawanie" onclick="oblicz('dodawanie')" >+</button>

Podobne pytania

–3 głosów

1 odpowiedź 708 wizyt

Kalkulator w HTML z dzieleniem w JavaScript

pytanie zadane 7 listopada 2021 w HTML i CSS przez alpha.netrunner Gaduła (4,690 p.)

0 głosów

3 odpowiedzi 42,690 wizyt

Kalkulator w JavaScript/HTML

pytanie zadane 2 stycznia 2017 w HTML i CSS przez Szymoonix Nowicjusz (190 p.)

0 głosów

1 odpowiedź 397 wizyt

Kalkulator w formularzu - JavaScript

pytanie zadane 18 listopada 2021 w JavaScript przez DLFDL Początkujący (270 p.)

Jak napisać kalkulator w html?

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