Suwak HTML - zmiana wartości zmiennej bez odświeżania

pytanie zadane 27 marca 2018 w JavaScript przez dmnkk Użytkownik (520 p.)

Witam, chiałbym zrobić suwak w HTML który od razu zwróci wartość do jakiejś zmiennej - tak żeby można ją było dalej wykorzystać. Chciałbym aby to odbyło się na czystym JS.

Znalazłem taki przykład na W3C. Niby wszystko działa - wyświetla wartość. Ale chiałbym tą wartość mieć zapisaną w zwykłej zmiennej, tak żebym mógł jej użyć np do obliczeń itp..

Macie jakieś pomysły?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="slidecontainer">
  <input type="range" min="1" max="255" id="zakres" style="width: 400px;">
  <p>WARTOŚĆ: <div id="demo"></div></p>
  <p>WARTOŚĆ: <div id="test"></div></p>
  
</div>

<script>


var suwak = document.getElementById("zakres"); 
var output = document.getElementById("demo");

output.innerHTML = suwak.value;				  

suwak.oninput = function() 					
{
  output.innerHTML = this.value;
}

</script>

</body>
</html>

1 odpowiedź

odpowiedź 27 marca 2018 przez hun1er76 Stary wyjadacz (11,960 p.)

Ale w czym problem? W zdarzeniu oninput zamiast przypisywać wartość suwaka do właściwości innerHTML obiektu output należy przypisać pod upragnioną zmienną zadeklarowaną wcześniej. Operacja, gdzie "wartość zapisuje się w zmiennej" nazywa się instrukcją przypisania.

komentarz 27 marca 2018 przez dmnkk Użytkownik (520 p.)

Dzięki za odpowiedź.

Zrobiłem tak jak napisałeś:

<script>
var suwak = document.getElementById("zakres");
var output = document.getElementById("demo"); 
var wartosc;

output.innerHTML = suwak.value;				  
suwak.oninput = function() 					
{
 // output.innerHTML = this.value;
  wartosc = this.value;
}
document.getElementById("test").innerHTML = "wynik: "+wartosc;

</script>

Niestety w miejscu na stronie gdzie powinna się wyświetlić wartość zmiennej wartość mam "undefined"..

Dziwne.. Powinno to zadziałać ..

komentarz 27 marca 2018 przez pablop76 VIP (123,180 p.)
edycja 27 marca 2018 przez pablop76

Ponieważ w momencie wywołania

document.getElementById("test").innerHTML = "wynik: "+wartosc;

zmienna 'wartość' jest zdeklarowana, ale nie ma przypisanej żadnej wartości. Wsadź wywołanie zmiennej do funkcji, po jej przypisaniu z inputa.

suwak.oninput = function() 
{
// output.innerHTML = this.value;
wartosc = this.value;
document.getElementById("test").innerHTML = "wynik: "+wartosc;
}