无法将滑块文本从一个数组对象转换到另一个数组对象

2023-04-01 admin

我正在做一个滤镜覆盖图，我似乎不能让数组项与我的html滑块连接。实际上，我希望输出age_Slider数组中的每个值，而不是在用户选择并拖动滑块时查看数字变更值。

我似乎只能打印出跨度"ageRange“中的值，即"No age limit”。

我尝试了几种源自w3schools：1和这个站点：2的方法

这些网站帮助我走到了这一步，但我希望有人不介意解释我所需要的逻辑，记住我不能使用任何jQuery。如果我能想象并理解你的逻辑，我就可以试着弄明白剩下的部分。

以下是我到目前为止的代码：

<!DOCTYPE html>
<html>
<body>

<h2>AGE SLIDER</h2>

<ul><strong>AGE:</strong> <span id="ageRange"> No age limit</span><br><br>
    <input id="ageSlider" type="range" min="0" max="5" value="0" onchange="ageSliderValue(this.value)" name="ageSlider"></ul>
    <ul>No age limit/8+/10+/12+/13+/14+</ul>


<script>
var age_Slider = ["No age limit, 8+, 10+, 12+, 13+, 14+"];
function ageSliderValue(newValue) {
    document.getElementById("ageSlider").innerHTML = age_Slider;
    document.getElementById("ageRange").innerHTML = age_Slider;

   for(i = 0; i < age_Slider.length i++) {
        if (age_Slider == 0) {
            document.getElementById("ageRange").innerHTML= age_Slider[0];
            age_Slider[0];
        }
        else if(age_Slider == 1) {
         document.getElementById("ageRange").innerHTML= age_Slider[1];
         age_Slider[1];
        }
        else if(age_Slider == 2) {            
            document.getElementById("ageRange").innerHTML= age_Slider[2];
            age_Slider[2];
        }
        else if(age_Slider == 3) {            
            document.getElementById("ageRange").innerHTML= age_Slider[3];
            age_Slider[3];
        }
        else if(age_Slider == 4) {
            document.getElementById("ageRange").innerHTML= age_Slider[4];
            age_Slider[4];
        }
        else if(age_Slider == 5){
            document.getElementById("ageRange").innerHTML= age_Slider[5];
            age_Slider[5];
        }
        else {
            alert("Out of Bounds!");
        }
    }
} 
</script>

</body>
</html>

转载请注明出处:http://www.cdylmjg.com/article/20230401/1031492.html