时间戳

首页 > 解决方案 > 使用 if/else 语句根据滑块值取值

javascript - 使用 if/else 语句根据滑块值取值

问题描述

我正在尝试使用滑块更改值的显示方式。我制作了一个显示值的标签，如下所示。

课程时间：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 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>

调试时编码不会显示任何错误，但它只显示天或天，并且不会根据滑块值更改。所以我期待一些帮助和想法来纠正这个问题。

谢谢一堆。

标签： javascripthtmlmodel-view-controller

解决方案

您需要使用输入元素的 oninput 和 onchange 事件，例如： oninput="slider_value(this.value)" onchange="slider_value(this.value)".

两者都使用以获得完全兼容性，因为oninputIE10 不支持。

这里的小例子，让你开始： https ://codepen.io/anon/pen/ewBNGj

请注意，设置日期/日期字符串 ( value_name()) 的函数是从slider_value()函数内部调用的。

推荐阅读