Использование оператора If / else для значения в соответствии со значением слайдера

Question

Я пытаюсь изменить отображаемое значение с помощью ползунка.Я сделал метку, которая отображает значение, как показано ниже.

Продолжительность курса: 1 день

значение, отображаемое здесь, изменяется в соответствии со значением ползунка.

поэтому, когда значение ползунка равно 1, оно должно отображаться как «день», а когда значение ползунка больше 1, оно должно отображаться как «дни».

У меня естьиспользуется оператор if / else в моем javascript для изменения отображаемого имени в соответствии со значением слайдера.Кодирование я использовал, как показано ниже.

Файл JS:

// method used to get value from slider and display. 

function slider_value() {

    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");

    output.innerHTML = slider.value;

    slider.oninput = function () {
        output.innerHTML = this.value;
    }
}

// method used to change name according to slider value

function value_name() {

    var count = document.getElementById("myRange");
    var outname = document.getElementById("dname"); 

    if (parseInt(count.value) == 1) {
        outname.innerHTML = "Day";
    }
    else {
        outname.innerHTML = "Days";
    }
}

Файл HTML:

<label for="duration">

    Course Duration :

    <span id="demo"></span>
    <span id="dname"></span>

</label>

<div class="slidecontainer">

    <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

</div>

Я вызвал функции для представления, как показано ниже:

<script> 
    slider_value();
    value_name();
</script>

Кодирование не будет отображать ошибок при отладке, но показывает только день или дни и не будет меняться в зависимости от значения ползунка.поэтому я ожидаю некоторой помощи и идей, чтобы исправить это.

Спасибо большое.

Answer 1

Нет необходимости в сложных вычислениях js, вы можете легко сделать это с событием change. добавьте прослушиватель событий в input, а затем добавьте туда свою логику, извлеките фрагмент

var el = document.getElementById('myRange');
el.addEventListener('change', function(event){
  var value = event.target.value;
  var _container = document.getElementById('demo');
  value == 1 ? _container.innerText = value+' Day' : _container.innerText = value+' Days'
})

<label for="duration">
                Course Duration :
                <span id="demo"></span>
                <span id="dname"></span>
            </label>

            <div class="slidecontainer">

                <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

            </div>

Answer 2

Оберните форматирование текста ползунка в функцию

  function updateSlider(e) {
    if (parseInt(e.value) == 1) {
      output.innerHTML = parseInt(e.value) + " Day";
    } else {
      output.innerHTML = parseInt(e.value) + " Days";
    }
  }

Таким образом, вы можете вызвать его один раз и правильно заполнить текст.Чтобы обновить содержимое ползунка при изменении чего-либо, добавьте прослушиватель событий input и вызовите эту функцию оттуда.

Вот пример:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

slider.oninput = function(e) {
  updateSlider(e.target);
}

function updateSlider(e) {
  if (parseInt(e.value) == 1) {
    output.innerHTML = parseInt(e.value) + " Day";
  } else {
    output.innerHTML = parseInt(e.value) + " Days";
  }
}

updateSlider(slider);

<label for="duration">
                Course Duration :
                <span id="demo"></span>
                <span id="dname"></span>
            </label>

<div class="slidecontainer">

  <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

</div>

Answer 3

Вам необходимо использовать события oninput и onchange элемента input, например: oninput="slider_value(this.value)" onchange="slider_value(this.value)".

Используйте оба для полной совместимости, поскольку oninput не поддерживается в IE10.

Небольшой пример, чтобы начать работу: https://codepen.io/anon/pen/ewBNGj

Обратите внимание, что функция, задающая строку дня / дня (value_name()), вызывается из функции slider_value().