Как реализовать отображение данных основываясь на значении value?

Question

[AlexTokker]

Интересует возможность вывода данных, в зависимости от значения value. На данный момент на странице имеется "ползунок", с текущим кодом. Который в тот же момент выводит значение на экран.

<input type="range" list="growth" min="80" max="190" step="1" value="80">
<div class="value">80</div>

Код обрабатывающий вывод значения на экран:

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = elem.value;
  var target = document.querySelector('.value');
  target.innerHTML = newValue;
}

elem.addEventListener("input", rangeValue);

Т.к. в js я не силен, но решить проблему нужно как-то. Как можно вывести в следующий блок (просто вывод значения в конце страницы), значения основанные на текущем показании value?

Пример:
Если value больше 80, но меньше 100 - нужно вывести цифру 1
Если value больше 100, но меньше 120 - нужно вывести цифру 1, цифру 2, цифру 3.

Answer 1

[Dark Hole]

У вас там такой код:

var newValue = elem.value;
target.innerHTML = newValue;

В newValue лежит число в виде строки. Т.е. надо всего лишь дописать var newValue = +elem.value; что бы получить в newValue число и дальше цепочкой if-else решать.
Целиком это будет выглядеть так:

spoiler

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = +elem.value;
  var target = document.querySelector('.value');
  if(newValue > 80 && newValue < 100) target.innerHTML = '1';
  else if(newValue > 100 && newValue < 120) target.innerHTML = '123';
  else target.innerHTML = '';
}

elem.addEventListener("input", rangeValue);

Comments

[AlexTokker]

Тут все прекрасно, работает. Большое спасибо. Еще вопрос, не до конца прописал логику.
На данный момент этот код выводит значения по одному, т.е. условно от 80 до 100, и от 100 до 120.

Как технически реализовать, что бы в случае, если значения пересекаются, то выводило сразу два значения:

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = +elem.value;
  var target = document.querySelector('.value');
  if(newValue > 80 && newValue < 100) target.innerHTML = '1';
  else if(newValue > 100 && newValue < 120) target.innerHTML = '123';
  else if(newValue > 115&& newValue < 118) target.innerHTML = '4';
  else if(newValue > 117&& newValue < 125) target.innerHTML = '5';
  else target.innerHTML = '';
}

elem.addEventListener("input", rangeValue);

Вставил строчку в тот же код, с выводом числа 4 и 5 (Ну само собой оно не работает :) ). Т.е. если пользователь выбирает значение, 112, то на экране хотелось бы отобразить сразу два значения: "123" и "4". А если выбирает 119, то соответственно видит: "123", "4", "5".

[Dark Hole]

AlexTokker: вы только не обижайтесь, но нужно просто уметь составлять алгоритмы. Вы их толком даже словами объяснить не можете. Ну вот я так и не понял, чего вы хотите добиться

[AlexTokker]

Dark Hole: Да, уже решил проблему. Спасибо за наводку :)