Programowanie kalkulatora - JS, HTML, CSS

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 :)

3

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

<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>
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

2

@Remigiusz Drobinski:

Czy w querySelectorAll mogę zrobić za pomocą id lub klasy

W querySelectorAll wstawiasz dowolny selektor CSS, zwraca tablicę (a dokładniej NodeList) znalezionych elementów na stronie.

0

Ok, już wszystko rozumiem, dziękuję ogromnie za pomoc <3

1 użytkowników online, w tym zalogowanych: 0, gości: 1