無法將滑塊文本從一個數組對象轉換爲另一個

我正在使用過濾器疊加層，並且我似乎無法獲得要使用我的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

無法將滑塊文本從一個數組對象轉換爲另一個

回答

相關問題