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

我正在使用过滤器叠加层，并且我似乎无法获得要使用我的html滑块连接的数组项目。本质上，不是在用户选择并拖动滑块时查看数字更改值，而是希望输出age_Slider数组中的每个值。无法将滑块文本从一个数组对象转换为另一个

我似乎只能打印出我在“没有年龄限制”的范围“ageRange”中的值。

我试过多种方法从W3Schools的词干： [1] https://www.w3schools.com/js/js_arrays.asp 并从该网站： [2] http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/

这些网站已经帮我多远这一点，但我希望有人不介意解释我所需要的逻辑，牢记我无法使用任何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>

来源

2017-07-08 KattInTheHat

所以我想通了。我搞砸了一些事情，首先我没有把“”放在我的数组中的每个项目周围，这使得它只是一个项目而不是6个不同的项目，其次我不需要在for循环所有，我只需要使用控制台记录“newValue”并从数组中访问“newValue”来测试它，而不是数组中的第一项。

<!DOCTYPE html> 
<html> 
<body> 

<h2>AGE SLIDER</h2> 
<section id="contentDiv"> </section> 
<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) { 
    console.log(newValue); 
    document.getElementById("ageRange").innerHTML = age_Slider[newValue];  
} 
</script> 

</body> 
</html>

来源

2017-07-10 21:10:18 KattInTheHat

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

回答

相关问题