Programowanie kalkulatora - JS, HTML, CSS

Remigiusz Drobinski

2020-11-03 08:15

Remigiusz Drobinski2020-11-03 08:15

Rejestracja:ponad 5 lat
Ostatnio:około 4 lata
Postów:19

0

Witajcie, mam za zadanie zaprogramować kalkulator, używając ww języków. Nie sprawiłoby to żadnego problemu, gdybym mógł, tworząc funkcję w JS dodawać wywołanie poszczególnych funkcji w html, jednak jest to zabronione w tym zadaniu. Chciałbym uniknąć wydarzenie, kiedy np będę tworzyć 10 osobnych funkcji by wypisać w textView cyfry od 0 do 9. Istnieje jakieś proste rozwiązanie by zamiast ręcznie wypisywać wartości zrobić pętle do wszystkich buttonów (,które np mają takie samo id), pobierać od nich value i wrzucać je do funkcji? Jestem laikiem jeśli chodzi o JS, więc byłbym ogromnie wdzięczny gdybyście, pisząc odpowiedzi podali mi jakieś hasła kluczowe, które wówczas mógłbym wygooglować etc

Dziękuję serdecznie za pomoc i życzę miłego dnia :)

~~pavarotti~~ 2020-11-03 09:34

Nigdy nie ustawiaj tego samego id różnym elementom, ewentualnie daj im taką samą klasę

złoty

2020-11-03 08:29

złoty2020-11-03 08:29

Rejestracja:ponad 17 lat
Ostatnio:27 dni
Lokalizacja:Warszawa
Postów:108

3

Możesz skorzystać np. z funkcjonalności dataset, i wrzucić każdemu z przycisków kalkulatora wartość, jaką reprezentuje.

Kopiuj

<body>
    <button data-value='1'>1</button>
    <button data-value='2'>2</button>
    <button data-value='3'>3</button>
    <button data-value='4'>4</button>
    <button data-value='5'>5</button>
    <button data-value='6'>6</button>
    <button data-value='7'>7</button>
    <button data-value='8'>8</button>
    <button data-value='9'>9</button>
    <button data-value='0'>0</button>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var buttons = document.querySelectorAll('button');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener("click", function(ev) {
                    var clicked = ev.target;
                    console.log(clicked.dataset.value);
                });
            }
        });
    </script>
</body>
</html>

edytowany 1x, ostatnio: złoty 2020-11-03 08:32

Georginho 2020-11-03 08:38

a czy nie lepiej to było zrobić poprzez: let buttons = [...document.querySelectorAll('button')] następnie buttons.forEach(button =>{}) ? Poprzez przypisanie wszystkich buttonów do zmiennej buttons chyba nie utworzyłeś tablicy, więc raczej nie możesz użyć "buttons[i]' Nie jestem pewien, bo dopiero się tego uczę

złoty 2020-11-03 09:11

@Georginho: to bez różncy, bo querySelectorAll zwraca listę node'ów, a po drugie nie chciałem wrzucać spread operator początkującemu. Co do tablicy, testuję kod który wrzucam, więc powyższy przykład działa, próbowałeś uruchomić? :)

Georginho 2020-11-03 09:24

niestety nie próbowałem, bo jestem w pracy i nie mam możliwości. Czyli coś tam kojarzyłem, ale nie wiedziałem w którym kościele. Cieszę się jednak, że zadałem pytanie i uzyskałem odpowiedź. Dzięki! :)

Remigiusz Drobinski

2020-11-03 08:55

Remigiusz Drobinski2020-11-03 08:55

Rejestracja:ponad 5 lat
Ostatnio:około 4 lata
Postów:19

0

Dziękuję, bo działa, nawet dobrze, jednak mam pytanie. Czy w querySelectorAll mogę zrobić za pomocą id lub klasy, bo np dla sin czy ln nie będzie działać a już wolałbym wszędzie mieć buttony. Ponownie dziękuję za pomoc :3

Georginho 2020-11-03 08:57

querySelectorAll wybiera CI wszystkie buttony i dodaje je do zmiennej. Jeśli chcesz sin czy ln to nadajesz odpowiednią klasę i uzywasz querySelector('.class')