Jak wyciągnąć aktualny wynik z funkcji?

pytanie zadane 2 listopada 2019 w JavaScript przez Michał Dawidek Nowicjusz (150 p.)

Cześć. Szukam i szukam i nie mogę znaleźć. Da się jakoś wyciągnąć aktualny wynik z funkcji? Mam coś takiego:

<div id="odlicz"></div>

onload=odlicz(-1);
function odlicz(x)
{
	x++;
	var iks = (document.getElementById('odlicz').innerHTML = x);
	setTimeout("odlicz(" + x + ")",1000);
};

Funkcja powoduje naliczanie od 0 do nieskończoności. W divie wyświetla sie wynik. Chciałbym stworzyć do tego pewne modyfikacje ale nie potrafię znależć rozwiązania.

Mianowicie chciałbym stworzyć pewnego if'a, który będzie coś robił po tym jak funkcja osiągnie np. 20. Dodatkowo chciałbym stworzyć button, który będzie modyfikował aktualny wynik, tj. np. po naciśnięciu przycisku wartość zwiększy się o 20 albo nadal będzie odliczało zgodnie z ustaloną zasadą.

Jest 25, przyciskam przycisk, robi się 45, ale nadal co sekunda zwiększa się o 1. Nie potrafię się dostać do aktualnej wartości z funkcji. Wiem, że za to odpowiadają closures, ale te rozwiązania widziałem tylko dla statycznych wartości, nie zmieniających się w czasie.

Próbowałem z returnem, ale nadal nie mogę zwrócić aktualnej wartości.

Zna ktoś rozwiązanie?

2 odpowiedzi

odpowiedź 2 listopada 2019 przez antypop Mądrala (5,730 p.)
wybrane 2 listopada 2019 przez Michał Dawidek

Najlepsza

<div id="odlicz">0</div>
    <button class="add20">+20</button>
    <script>
        


        let odlicz = (x) => {
            setInterval( ()=> {
                x++;
                document.getElementById('odlicz').innerHTML = x;
                if ( x == 20 ) {
                    alert('zrób coś');
                }

            },1000);

                document.getElementsByClassName('add20')[0].addEventListener('click', ()=> {
                    x = x + 20;
                    console.log(x);
                });

        }
        
        onload = odlicz(0);

    </script>

Może nie najpiękniejszy i najpoprawniejszy kod ale z grubsza może to wyglądać tak ;)

komentarz 2 listopada 2019 przez Michał Dawidek Nowicjusz (150 p.)

Dzięki, ta opcja w czystej wersji działa, ale nie działa przy pobieraniu skryptu JS z zewnętrznego pliku. Wiesz jak temu zaradzić i co jest w ogóle tego przyczyną?

Twój przykład, ale rozdzielony: https://jsfiddle.net/okq01evn/

komentarz 3 listopada 2019 przez antypop Mądrala (5,730 p.)

Dziwne ale u mnie działa :D

HTML:

<!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>
</head>
<body>

    <div id="odlicz">0</div>
    <button class="add20">+20</button>
    
    <script scr="main.js"></script>    
</body>
</html>

I plik MAIN.JS z kodem:

let odlicz = (x) => {
           setInterval( ()=> {
                x++;
                document.getElementById('odlicz').innerHTML = x;
                if ( x == 20 ) {
                    alert('zrób coś');
                }

            },1000);

                document.getElementsByClassName('add20')[0].addEventListener('click', ()=> {
                    x = x + 20;
                    console.log(x);
                });

        }
        
        onload = odlicz(0);

Pamiętaj że skrypt musi być niżej w dokumencie niż przycisk :)

komentarz 3 listopada 2019 przez Michał Dawidek Nowicjusz (150 p.)

Dziękuję, masz rację. Problem był w wywołaniu skryptu ponad divem :(

odpowiedź 2 listopada 2019 przez DawidK Nałogowiec (37,910 p.)

użyj setInterval przy odliczaniu

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Odliczanie</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div id='odlicz'></div>

    <script>
        const iks = document.getElementById('odlicz');
        let x = 0;

        setInterval(odlicz,1000);

        function odlicz() {
            x++;
            iks.innerHTML = x;
        }
    
    </script>
</body>
</html>