Как динамически изменить цвет тега span?

Как динамически изменить цвет тега span?

Я пытаюсь построить слайдер. Слайдер имеет диапазон от 0 до 30 прыжков по 10 шагов каждый раз, так что: 0, 10, 20, 30. На каждом из этих 4 уровней я поместил пустой круг. В настоящее время, когда я нажимаю на уровень на слайдере, соответствующая часть слайдера окрашивается в ожидаемый цвет. Например, щелчок на уровне 10 означает, что ползунок окрашен в заданный цвет от 0 до 10. Сейчас я пытаюсь сделать так, чтобы круги внутри уровня, по которому щелкали, тоже имели одинаковый цвет, например, я щелкаю по уровню 10, и круги, расположенные в 0 и 10, также имеют одинаковый цвет. У меня есть следующий код, над которым я до сих пор работал:

 function sliderVal(range){ var nodes=document.getElementsByClassName("dot"); for (let i=0;i{amp}lt;nodes.length;i  ){ nodes[i].style.backgroundColor = "#DADDe3"; } for (let i=0;i{amp}lt;range;i  ){ console.log(nodes[i].id) nodes[i].style.backgroundColor = "#84b7e3"; } } 
 input[type=range] { width: 100%; margin: 3.9px 0; } input[type="range"]:focus { outline: none; } input[type="range"]{ -webkit-appearance: none; -moz-apperance: none; border-radius: 11px; height: 11px; background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, #84b7e3), color-stop(0.15, #DADDe3) ); } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; /*background-color: #E9E9E9;*/ /*border: 1px solid #CECECE;**/ box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d; border: 0px solid #000000; width: 20.035px; border-radius: 50px; background: #3072ac; cursor: pointer; margin-top: 0px; } input[type=range]::-moz-range-track { width: 100%; height: 11px; cursor: pointer; box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0); background: #DADDe3; border-radius: 1.3px; border: 0px solid #010101; } input[type="range"]::-moz-range-progress { height: 11px; background-color: #84b7e3; } input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 18px; width: 18px; border-radius: 50px; background: #3072ac; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 11px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: #6fabde; border: 0px solid #010101; border-radius: 2.6px; box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0); } input[type=range]::-ms-fill-upper { background: #84b7e3; border: 0px solid #010101; border-radius: 2.6px; box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0); } input[type=range]::-ms-thumb { box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 18px; width: 18px; border-radius: 50px; background: #3072ac; cursor: pointer; height: 11px; } input[type=range]:focus::-ms-fill-lower { background: #84b7e3; } input[type=range]:focus::-ms-fill-upper { background: #99c3e8; } .dot { height: 20px; width: 20px; background-color: #DADDe3; border-radius: 50%; display: inline-block; } #slider1{ position:absolute; top: 77%; left: 0%; } #slider2{ position:absolute; top: 77%; left: 10%; } #slider3{ position:absolute; top: 77%; left: 20%; } #slider3{ position:absolute; top: 77%; left: 30%; } 
 {amp}lt;div class="slidecontainer" style="position: relative"{amp}gt; {amp}lt;input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onClick="sliderVal('value/10')"{amp}gt; {amp}lt;span class="dot" id="slider1" {amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="dot" id="slider2" {amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="dot" id="slider3"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="dot" id="slider4" {amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; 

К сожалению, мой clicklistener в файле js не выполняет свою работу, и круги не меняют свой цвет. Как видите, для создания кругов я использовал пустой тег span. Я совершенно новичок в HTML / Javascript и у меня такое чувство, что я мог / должен был использовать что-то кроме тега span для того, что я хочу. Есть ли способ заставить эти теги span изменять свой цвет фона, изменяя приведенный выше код? или я должен использовать что-то еще (возможно, значок круга или что-то) для этой цели? Я знаю, что это не оригинальный вопрос. Но ответы на похожие вопросы, которые я нашел в разделе Изменение цвета тега span в зависимости от значения, а также w3schools по адресу https://www.w3schools.com/js/js_htmldom_css.asp, пока что не очень помогли. Какие-либо предложения?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector