使用 If/else 语句根据滑块值进行赋值

Question

我正在尝试使用滑块更改值的显示方式。我制作了一个标签，显示如下值。课程时长：1天此处显示的值根据滑块值而变化。因此，当滑块值为 1 时，应显示为“天”，当滑块值大于 1 时，应显示为“天”。我在我的 javascript 中使用 if/else 语句来更改根据滑块值显示的名称。我使用的编码如下。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 valuefunction 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>