Zmiana wartosci w divie

pytanie zadane 29 marca 2017 w JavaScript przez BlvckFox Gaduła (4,240 p.)

Mój kod: https://codepen.io/FoxCode/pen/yMQJKG
Dlaczego wartość ciągle jest ustawiona na 5? Czy to problem związany z "change" ? Jest coś specialnie przeznaczonego do input type="range" ?

2 odpowiedzi

odpowiedź 29 marca 2017 przez Pietrak Pasjonat (18,850 p.)
wybrane 29 marca 2017 przez BlvckFox

Najlepsza

Była wartość sztywno przypisana, więc nie zmieniała się na zdarzenie.

https://codepen.io/anon/pen/BWGzex

Semantycznie zamiast span powinno być <output>

komentarz 29 marca 2017 przez BlvckFox Gaduła (4,240 p.)

Rozumiem, robiłem to tylko w formie testu, dlatego jest span. A czy przy pomocy addEventListener można zmieniać wyprowadzane wartości bez "change"? Tzn. podczas trzymania lewego przycisku myszy i przesuwania w lewo i w prawo, żeby wartość się zmieniała bez potrzeby puszczenia.

odpowiedź 29 marca 2017 przez Arkadiusz Waluk Ekspert (287,950 p.)

To problem związany z tym, że odczyt wartości z inputa wykonujesz tylko raz, przy deklarowaniu zmiennej.

rateValue = rateRange.value,

Zapisz to tak, aby wartość była odczytywana przy każdym wywołaniu funkcji.

komentarz 29 marca 2017 przez BlvckFox Gaduła (4,240 p.)

Więc wartość input="range" nie przechodzi automatycznie na zmienną?

komentarz 29 marca 2017 przez Arkadiusz Waluk Ekspert (287,950 p.)

No nie, pobierana jest tylko w momencie deklaracji zmiennej.

W zasadzie wystarczy przenieść odczytywanie wartości do funkcji changeRateValue. Czyli zamiast:

rateTextValue.innerHTML = rateValue;

zrobić

rateTextValue.innerHTML = rateRange.value;

I powinno działać. Albo możesz też zrobić tak jak podał w swojej odpowiedzi @Pietrak. Myślę, że to nawet ładniejszy sposób, bo od razu odczytujesz value tego konkretnego klikniętego inputa (gdybyś miał ich kilka na stronie).