W tej chwili mam ten kod, w którym część 1 (do zmiany numerów suwaków zakresu) działa tylko raz, a część 2 (do zmiany koloru) działa. Jednak po usunięciu części 2 część 1 działa dobrze. Czy ktoś może mi pomóc?

function sliderChange()
{ 
    var sliderVal = document.getElementById("speed").value+"%";    
    document.getElementById("sliderVal").innerHTML = sliderVal; //Part 1

    document.getElementById("speed").oninput = function() {
    this.style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (this.value-50) + '%, #fff ' + (this.value-50) + '%, white 100%)'
    }; //Part 2
}
0
Aidan Chui 31 marzec 2020, 18:56

3 odpowiedzi

Najlepsza odpowiedź

Rozwiązany Dodaj onmousemove = "sliderChange ()" do html (w tym onChange)

0
Aidan Chui 31 marzec 2020, 18:12

document.getElementById("speed").oninput rejestruje odbiornik zdarzeń dla input zdarzeń w elemencie o identyfikatorze speed (nie udostępniłeś HTML, więc nie mogę powiedzieć, który z nich. Prawdopodobnie suwak). Jeśli ten element nigdy nie uruchomi zdarzenia input, przypisana funkcja nie zostanie wykonana.

Jeśli zaktualizuję to w ten sposób:

function sliderChange()
{ 
  var el = document.getElementById("speed");
  var sliderVal = el.value + "%";    
  document.getElementById("sliderVal").innerHTML = sliderVal; //Part 1

  el.style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (this.value - 50) + '%, #fff ' + (this.value - 50) + '%, white 100%)'; //Part 2
}

document.getElementById("speed").addEventListener("change", sliderChange);
<input type="range" id="speed" />
<div id="sliderVal"></div>

Widać, że kod działa dobrze.

Tyle że nie widzisz tła w <input type="range" />. Jest to prawdopodobne, ponieważ przeglądarka nie zezwala na takie stylizowanie. (Inspektor mówi mi, że atrybut jest mimo to stosowany).

0
Ryuno-Ki 31 marzec 2020, 16:12

Właściwość oninput przechowuje pojedynczą funkcję, która jest wywoływana za każdym razem, gdy zmienia się wartość suwaka zakresu.

Więc zakładając, że robisz coś takiego w swoim HTML:

<input type="range" min="1" max="100" value="50" class="slider" id="speed" oninput="sliderChange()">

To powie suwakowi, aby uruchamiał funkcję "sliderChange" za każdym razem, gdy otrzyma dane wejściowe, jak już wiesz.

Jednak Twoja „część 2” weźmie każdą funkcję, która zostanie uruchomiona „oninput” i nadpisze ją:

document.getElementById("speed").oninput = function() { ...

Tak więc twoja część 2 tak naprawdę mówi: „hej suwak, jakąkolwiek funkcję uruchamiasz, gdy otrzymujesz dane wejściowe? Ta sliderChange funkcja? Powinna zostać całkowicie zastąpiona nową funkcją, która zmienia kolor tła”.

Oznacza to, że suwak nie będzie już uruchamiał funkcji „sliderChange”. Zamiast tego uruchomi anonimową funkcję (wszystko pomiędzy „function () {” i „}”), która zmienia tło.

Możesz to naprawić, usuwając funkcję anonimową i aktualizując kod zmieniający tło, aby działał bezpośrednio na elemencie suwaka:

function sliderChange() {
    var sliderVal = document.getElementById("speed").value;    
    document.getElementById("sliderVal").innerHTML = sliderVal + "%"; //Part 1

    document.getElementById("speed").style.background = 'linear-gradient(to right, #85C1E9 0%, #85C1E9 ' + (sliderVal-50) + '%, #fff ' + (sliderVal-50) + '%, white 100%)';
}

W ten sposób ta sama funkcja „sliderChange” jest uruchamiana za każdym razem, gdy suwak otrzymuje dane wejściowe, zamiast zmieniać funkcję wejściową po pierwszym uruchomieniu.

To powiedziawszy, jak wspominali inni, stylizowanie zwykłego suwaka „po wyjęciu z pudełka” może nie działać zgodnie z oczekiwaniami, w zależności od przeglądarki i suwaka HTML, którego faktycznie używasz. Powodzenia!

1
Ethan 31 marzec 2020, 16:39