Изменить div-элемент в соответствии с диапазоном входных элементов - PullRequest
Новая
       8

Изменить div-элемент в соответствии с диапазоном входных элементов

2 голосов
/ 13 апреля 2020

Я создал этот простой диапазон ввода (со значением от 0 до 100) и элемент div (#boxColor). Я хотел бы добиться, чтобы при перетаскивании ползунка диапазона ввода влево (ниже значения 33) поле меняло цвет на зеленый. Также, если я перетащу ползунок диапазона ввода вправо (выше 66), цвет рамки должен измениться на красный. Между значениями 34-65 поле должно оставаться синим. Кто-нибудь здесь знает, как этого добиться? 

function myFunction() {
var x = document.getElementById("myRange").value;
if (x = "50") {
document.getElementById("text").innerHTML = "new";
}
}
#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>  
    
<div id="boxColor"></div>

Ответы [ 4 ]

2 голосов
/ 13 апреля 2020

Вы можете использовать обработчик события onchange для вызова функции, которая выполняет изменение цвета в зависимости от текущего значения ползунка. Ниже приведен пример: 

function handleChange() {

  var x = document.getElementById('myRange').value;
  let color;
  if (x <= 33) {
    color = 'green';
  } else if (x >= 66) {
    color = 'red';
  } else {
    color = 'blue';
  }
  document.getElementById('boxColor').style.backgroundColor = color;
}
#boxColor {
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: 20px;
}
<div class="slidecontainer">
  <label for="myRange">Custom range slider:</label>
  <input 
    type="range" 
    min="1" 
    max="100" 
    value="50" 
    class="slider" 
    id="myRange" 
    onchange="handleChange()" 
  />
</div>

<div id="boxColor"></div>
2 голосов
/ 13 апреля 2020

Вы можете изменить стиль элемента box, прослушивая событие ввода на элементе-слайдере, например: 

const slider = document.getElementById('myRange');
const box = document.getElementById('boxColor');

slider.oninput = ({ target: { value } }) => {
  if (+value < 33) box.style.background = 'green';
  else if (+value > 66) box.style.background = 'red';
  else box.style.background = 'blue';
}
#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>  
    
<div id="boxColor"></div>
1 голос
/ 13 апреля 2020

У вас там было несколько проблем, я не могу объяснить их все, но отсутствует значение, также ведение журнала внутри HTML не изменит фон вашего элемента, вы должны использовать для этого свойства стиля. 

<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" id="myRange" step="2">
</div>  
<div id="box"></div>

const slider = document.getElementById('myRange');
slider.addEventListener('input', myFunction);
var box = document.querySelector('#box');

function myFunction() {
let x = this.value;

console.log(x);

box.innerHTML = x;
if(x < 33){
box.style.backgroundColor = 'green';
}
else if(x > 65){
box.style.backgroundColor = 'red';
}
else{
box.style.backgroundColor = 'blue';
 }
}


#box {
width: 100px; 
height: 100px;
background: blue;
margin-top: 20px;
}

См. Эту скрипку: https://jsfiddle.net/dsgqtwko/1/

0 голосов
/ 13 апреля 2020

Все вышеприведенные ответы в порядке. Но я немного их улучшил, чтобы вы могли более свободно оформлять прямоугольник в зависимости от изменения значения. 

function handleChange(event) {
  const { value } = event.target;
  const box = document.querySelector('.boxColor');
  
  if(value <= 33) {
    box.classList.add('boxColor--green');
  }else {
    box.classList.remove('boxColor--green');
  }
  
  if(value > 33 && value <= 65) {
    box.classList.add('boxColor--blue');
  }else {
    box.classList.remove('boxColor--blue');
  }
  
  if(value > 65) {
    box.classList.add('boxColor--red');
  }else {
   box.classList.remove('boxColor--red')
  }
  
}
.boxColor {
  width: 100px; height: 100px; background: blue; margin-top: 20px;
}

.boxColor--green {
  background-color: green;
}

.boxColor--red {
  background-color: red;
}

.boxColor--blue {
  background-color: blue;
}
<div class="slidecontainer">
 <p>Custom range slider:</p>
 <input type="range" min="1" max="100" value="50" class="slider" id="myRange"
       oninput="handleChange(event)">
</div>  

<div class="boxColor"></div>

Надеюсь, это полезно.

...