У меня есть ползунок диапазона, в котором я хочу контролировать изменение значения. Если значение слайдера больше 0 .. скажем, удачного дня - PullRequest
Новая
       11

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

0 голосов
/ 31 октября 2019 
<div class="container"><div id="number">0</div>
        <input type="range" min="0" max="10" value="0" id="slider"></div>

<script>
        var slider=document.
            getElementById("slider");
        var number=document.
            getElementById("number");
        slider.oninput=function(){
            number.innerHTML=slider.
                value;}
</script>

<p id="demo">good evening</p>

По какой-то причине это не работает, когда у меня есть номер, или ползунок, или значение slider.value в операторе if. 

<script>

    if (number> '0' ){document.getElementById("demo").innerHTML = "Good day!";}
</script>

1 Ответ

1 голос
/ 31 октября 2019

Если вы хотите изменить «Добрый вечер» на «Добрый день!»когда вы перемещаете ползунок вправо, приведенный ниже код должен дать вам то, что вы хотите. 

var slider = document.getElementById("slider");
var number = document.getElementById("number");

slider.oninput = function() {
  number.innerHTML = slider.value;
  
  if (slider.value > 0) {
    document.getElementById("demo").innerHTML = "Good day!";
  } else {
    //Change the text back if slider is not greater than 0.
    document.getElementById("demo").innerHTML = "Good evening!";
  }
}
<div class="container">
  <div id="number">0</div>
  <input type="range" min="0" max="10" value="0" id="slider"></div>

<p id="demo">Good evening!</p>

Объяснение: В вашем условии if вы говорите number > '0'. number - это элемент, и его использование не даст вам значения внутри. Вместо этого я использовал значение прямо из ползунка с slider.value. Кроме того, вместо сравнения со строкой '0' я сравниваю ее с правильным типом, целым числом 0. Кроме того, если вы хотите "Добрый вечер!"чтобы вернуться, когда вы вернетесь к 0, я добавил часть else для обработки, когда число не больше 0.

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

...