Dodawanie wartości pobieranych z buttonów

Odpowiedz Nowy wątek
2019-08-22 17:19
0

Cześć,
Jestem początkujący jeśli chodzi o kodowanie i stanąłęm w miejscu z dokończeniem zadania które sobie wymyśliłem.
Chodzi o to aby po kliknieciu w buttony, w divie wyświetlała się suma z ich wartości. Na ten moment wygląda to tak że po kliknięciu w divie pojawia się suma ciągu znaków, czyli kolejne liczby pojawiają się po sobie zamiast sumować. Kombinowałem z parseIntem sugerując się kodem z prostych kalkulatorów ale nie udało mi sie uzyskać rezultatu. Kod na ten moment wygląda tak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        button {
                display: block;
                margin: 20px auto;
                width: 200px;
                height: 50px;
                border: none;
                border-radius: 10px;

            }

        button:hover {
            border: 2px solid black;
        }

        #btn1 {
            background: lightblue;
        }

        #btn2 {
            background: lightgreen;
        }

        #btn3 {
            background: lightcoral;
        }

        div {
            margin: 30px auto;
            padding: 0px;
            display: block;
            width: 300px;
            height: 70px;
            border: 2px solid black;
            border-radius: 10px;
            background: goldenrod;
            text-align: center;
            font-size: 20px;
        }

    </style>
</head>

<body>

    <button id="btn1" class="b1"> 1 pkt </button>

    <button id="btn2" class="b2"> 3 pkt</button>

    <button id="btn3" class="b3"> 10 pkt</button>

    <div>

    </div>

</body>

    <script>
        const btn1 = document.getElementById('btn1');
        const btn2 = document.getElementById('btn2');
        const btn3 = document.getElementById('btn3');

        const btn1value = 1;
        const btn2value = 3;
        const btn3value = 10;

       const div = document.querySelector("div");

       const addNr = function(addNr) {

        div.innerText += parseInt(addNr, 10) ;

    }

        btn1.addEventListener('click', function() {addNr(btn1value)});
        btn2.addEventListener('click', function() {addNr(btn2value)});
        btn3.addEventListener('click', function() {addNr(btn3value)});

    </script>

</html>

Mogę liczyć na poradę?

edytowany 1x, ostatnio: kendyslaw, 2019-08-22 17:22

Pozostało 580 znaków

2019-08-22 18:26
0

Zamień tę linię div.innerText += parseInt(addNr, 10); na tę div.textContent = ((div.textContent|0) + addNr);. Więcej informacji na temat tej konwersji znajdziesz w którymś z filmów @Gynvael Coldwind.

edytowany 2x, ostatnio: Neutral, 2019-08-22 18:27
(div.textContent|0) - po co tak zaciemniać kod? Operator bitowy do zwykłej konwersji? - Maciej Cąderek 2019-08-22 19:01

Pozostało 580 znaków

2019-08-22 18:56
2

Twój błąd polega na tym, że w:

div.innerText += parseInt(addNr, 10);

to nie addNr jest problemem (bo to jest już typu number), ale div.innerText (bo jest typu string). Tak więc konwertujesz nie tą część co potrzeba.

Zrób tak:

div.innerText = Number(div.innerText) + addNr;

i będzie działać.

edytowany 1x, ostatnio: Maciej Cąderek, 2019-08-22 19:04

Pozostało 580 znaków

2019-08-23 00:04
0

Tak podejrzewałem że to już może być number i niepotrzebnie konwertuję addNr, ale nie wiedziałem jak to zapisać. Super, działa! Dzięki wielkie za odpowiedź.

edytowany 2x, ostatnio: kendyslaw, 2019-08-23 00:08
@kendyslaw: możesz zaakceptować pomocną odpowiedź. - Silv 2019-08-23 15:49

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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