• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
3,960 wizyt
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ź

+1 głos
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ć .. 

1
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;
}

 

Podobne pytania

0 głosów
1 odpowiedź 3,521 wizyt
pytanie zadane 17 lutego 2019 w HTML i CSS przez Teslum_369 Gaduła (4,190 p.)
0 głosów
1 odpowiedź 183 wizyt
pytanie zadane 9 maja 2020 w HTML i CSS przez rob Bywalec (2,440 p.)
+1 głos
1 odpowiedź 757 wizyt
pytanie zadane 13 września 2018 w JavaScript przez Radosław Foltyński Obywatel (1,180 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...