kalkulator javascript

pytanie zadane 5 stycznia 2020 w JavaScript przez an0nymous123 Początkujący (280 p.)
zmienione kategorie 5 stycznia 2020 przez Comandeer

Mam taki projekt kalkulatora w html/css zrobiony za pomocą inputów. Uczę się javascriptu od niedawna i nie wiele mam z tą dziedziną wspólnego. Czy ktoś wie jak zrobić aby po kliknięciu przycisku 1 na brązowym tle wyskoczyło 1, i tak dalej i tak dalej. Wrzucam kod html/css.

<!DOCTYPE html>
<html lang="pl-PL">
 <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>KALKULATOR</title>
</head>
 <body>
    <h1 id="h1">KALKULATOR</h1>
    
    



    <div class="container">
        <div class="window"></div>
        <div class="menu">
            
            <div class="rzad1">
                <div class="button" id="jeden">   <input type="button" value="1" class="button" onclick="funkcja1()">   </div>
                <div class="button">   <input type="button" value="4" class="button">  </div> 
                <div class="button">   <input type="button" value="7" class="button">  </div>
            </div>
            
            <div class="rzad2">
                <div class="button">  <input type="button" value="2" class="button">  </div> 
                <div class="button">  <input type="button" value="5" class="button">  </div> 
                <div class="button">  <input type="button" value="8" class="button">  </div>
            </div>
            
            <div class="rzad3">
                <div class="button">  <input type="button" value="3" class="button">  </div> 
                <div class="button">  <input type="button" value="6" class="button">  </div>
                <div class="button">  <input type="button" value="9" class="button">  </div>
            </div>
            
            <div class="rzad4">
                <div class="button">  <input type="button" value="+" class="button">  </div>
                <div class="button">  <input type="button" value="*" class="button">  </div>
                <div class="button">  <input type="button" value=":" class="button">  </div>
            </div>
            
            <div class="rzad5">
                <div class="button">  <input type="button" value="-" class="button">  </div>
                <div class="button">  <input type="button" value="p" class="button">  </div>
                <div class="button">  <input type="button" value="q" class="button">  </div>
            </div>
        </div>
    </div>

1 odpowiedź

odpowiedź 5 stycznia 2020 przez adam_jankowski Mądrala (5,970 p.)

Nie twórz dla każdego inputa osonej funkcji, a stwórz jedną, której jako parametr będziesz posyłał liczbę, która ma zostać wyświetlona. Musisz zmienić klasę window, na id="window", żeby można było złapać ten element w js. Wewnątrz funkcji łapiesz element o id window i przypisujesz do jakiejś zmiennej to co w nim jest (innerHTML). Nastepnie zmieniasz jego wewnętrzny HTML na to co było w nim już (to co przypisałeś do zmiennej) i dodatkowo wartość którą funckja otrzymała jako argument

Mam nadzieję, że pomogłem :)

Pozdrawiam

komentarz 5 stycznia 2020 przez Comandeer Guru (601,110 p.)

Musisz zmienić klasę window, na id="window", żeby można było złapać ten element w js.

Nie musi, przecież po klasie można element znaleźć przy pomocy document.querySelector.

komentarz 5 stycznia 2020 przez Tomek Sochacki Ekspert (227,510 p.)

w 100% racja, ale akurat zgodzę się z tym, żeby raczej unikać w JS pobierania referencji po klasach CSS... ja preferuję raczej np. dodatkowy atrybut data- lub id, w zależności czy jest to unikalny element czy nie. Ale to oczywiście tylko kwestie gustu.

Natomiast nie zgodzę się co do tego innerHTML, nie widzę za bardzo uzasadnienia dla stosowania tutaj tego pola w obiekcie referencji DOM. Wg mnie w zupełności wystarczy textContent. Natomiast z inputa pobierać można przecież po prostu pole value.

komentarz 5 stycznia 2020 przez Comandeer Guru (601,110 p.)

w 100% racja, ale akurat zgodzę się z tym, żeby raczej unikać w JS pobierania referencji po klasach CSS... ja preferuję raczej np. dodatkowy atrybut data- lub id, w zależności czy jest to unikalny element czy nie. Ale to oczywiście tylko kwestie gustu.

W przypadku BEM akurat klasa bardzo często identyfikuje elementy (zwłaszcza, że elementy o tych samych klasach powinny mieć takie samo zachowanie), stąd dla mnie pobieranie po klasie jest najbardziej naturalne.

komentarz 5 stycznia 2020 przez Tomek Sochacki Ekspert (227,510 p.)

Jeśli korzystasz z dobrze opisanych klas, metodyki BEM itp. to spoko, moje doświadczenia wynikają po części z tego, że często muszę korzystać z gotowych klas CSS tworzonych przez inne zespoły albo w ogóle z gotowych komponentów html/css gdzie ja wkraczam tylko z JS i już parę razy naciąłem się na zapinaniu się na jakieś klasy... a drugą sprawą, że czasami klasy CSS mam w warunkach produkcyjnych hashowane, a po czymś takim to na pewno nie chciałbym łapać referencji :) Także mnie jednak bardziej przekonuje id lub data- ale oczywiście to kwestie indywidualne i dużo zależy od projektu.