JavaScript Slider問題

Question

在我的網站上，我有一個滑塊，滑塊的值爲500 - 2500，步長爲100。我有一些代碼會將值與鏈接關聯起來，因此按鈕的鏈接將根據滑塊顯示的值而變化。我遇到的問題是網站首次加載時，如果您在不移動滑塊的情況下點擊「go」按鈕，它不會將您帶到我爲該值設置的鏈接，但在控制檯中出現錯誤彈出，說「不能連接到路線/500（如果值是500）。但是，腳本似乎激活，一旦我移動我的滑塊，並點擊」去「按鈕的另一個值。做我做起來很我的腳本啓動，對嗎？下面是代碼

var slider = document.getElementById("myRange"); 
 
var output = document.getElementById("demo"); 
 
var link = document.getElementById("link"); 
 
output.innerHTML = slider.value; // Display the default slider value 
 
link.setAttribute('href',slider.value); 
 

 
// Update the current slider value (each time you drag the slider handle) 
 
slider.oninput = function() { 
 
    output.innerHTML = this.value; 
 
    if(this.value==500) 
 
    link.setAttribute('href','500.html'); 
 
    else if(this.value==600) 
 
    link.setAttribute('href','jesus.html'); 
 
    else if(this.value==700) 
 
    link.setAttribute('href','bing.html'); 
 
    else 
 
    link.setAttribute('href','bing.html'); 
 
}

#slidecontainer { 
 
    width: 50%; 
 
    /* Width of the outside container */ 
 
    margin-left: auto !important; 
 
    margin-right: auto !important; 
 
} 
 

 
/* The slider itself */ 
 
.slider { 
 
    -webkit-appearance: none; /* Override default CSS styles */ 
 
    appearance: none; 
 
    width: 100%; /* Full-width */ 
 
    height: 25px; /* Specified height */ 
 
    background: #d3d3d3; /* Grey background */ 
 
    outline: none; /* Remove outline */ 
 
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ 
 
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */ 
 
    transition: opacity .2s; 
 
} 
 

 
/* Mouse-over effects */ 
 
.slider:hover { 
 
    opacity: 1; /* Fully shown on mouse-over */ 
 
} 
 

 
/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; /* Override default look */ 
 
    appearance: none; 
 
    width: 25px; /* Set a specific slider handle width */ 
 
    height: 25px; /* Slider handle height */ 
 
    background: #4CAF50; /* Green background */ 
 
    cursor: pointer; /* Cursor on hover */ 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; /* Set a specific slider handle width */ 
 
    height: 25px; /* Slider handle height */ 
 
    background: #4CAF50; /* Green background */ 
 
    cursor: pointer; /* Cursor on hover */ 
 
}

<section id="banner"> 
 
    <header> 
 
    <h2>Choose Budget</h2> 
 
    </header> 
 
    <div id="slidecontainer"> 
 
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange"> 
 
    </div> 
 
    <ul class="Slider"> 
 
    <li> 
 
     <p>Price Point: $<span id="demo"></span></p> 
 
    </li> 
 
    <br> 
 
    <a href="#" class="button style3" id="link">Go</a> 
 
    <br> 
 
    </ul> 
 
</section>

Answer 1

的問題似乎是在你的初始化。你與s的值初始化激光雷達：

link.setAttribute('href',slider.value); 

但你會希望它是500.html而不是500（其起始位置滑塊的值）。要解決這個問題

一種方法是初始化爲正確的值的鏈接：

link.setAttribute('href', '500.html'); 

另一種方法（我首選的方法）是通過調用函數把手完全消除初始化和初始化滑塊邏輯（我已經複製下面的代碼，並換做這樣）：

var slider = document.getElementById("myRange"); 
 
var output = document.getElementById("demo"); 
 
var link = document.getElementById("link"); 
 
output.innerHTML = slider.value; // Display the default slider value 
 
sliderHandler.apply(slider); // Initialize link's value by calling the handler 
 

 
// Update the current slider value (each time you drag the slider handle) 
 
slider.oninput = sliderHandler; 
 
function sliderHandler() { 
 
    output.innerHTML = this.value; 
 
    if(this.value==500) 
 
    link.setAttribute('href','500.html'); 
 
    else if(this.value==600) 
 
    link.setAttribute('href','jesus.html'); 
 
    else if(this.value==700) 
 
    link.setAttribute('href','bing.html'); 
 
    else 
 
    link.setAttribute('href','bing.html'); 
 
}

#slidecontainer { 
 
    width: 50%; 
 
    /* Width of the outside container */ 
 
    margin-left: auto !important; 
 
    margin-right: auto !important; 
 
} 
 

 
/* The slider itself */ 
 
.slider { 
 
    -webkit-appearance: none; /* Override default CSS styles */ 
 
    appearance: none; 
 
    width: 100%; /* Full-width */ 
 
    height: 25px; /* Specified height */ 
 
    background: #d3d3d3; /* Grey background */ 
 
    outline: none; /* Remove outline */ 
 
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ 
 
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */ 
 
    transition: opacity .2s; 
 
} 
 

 
/* Mouse-over effects */ 
 
.slider:hover { 
 
    opacity: 1; /* Fully shown on mouse-over */ 
 
} 
 

 
/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: none; /* Override default look */ 
 
    appearance: none; 
 
    width: 25px; /* Set a specific slider handle width */ 
 
    height: 25px; /* Slider handle height */ 
 
    background: #4CAF50; /* Green background */ 
 
    cursor: pointer; /* Cursor on hover */ 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; /* Set a specific slider handle width */ 
 
    height: 25px; /* Slider handle height */ 
 
    background: #4CAF50; /* Green background */ 
 
    cursor: pointer; /* Cursor on hover */ 
 
}

<section id="banner"> 
 
    <header> 
 
    <h2>Choose Budget</h2> 
 
    </header> 
 
    <div id="slidecontainer"> 
 
    <input type="range" min="500" max="2500" value="500" step="100" class="slider" id="myRange"> 
 
    </div> 
 

 
    <ul class="Slider"> 
 
    <li> 
 
     <p>Price Point: $<span id="demo"></span></p> 
 
    </li> 
 
    <br> 
 
    <a href="#" class="button style3" id="link">Go</a> 
 
    <br> 
 
    </ul> 
 
</section>

還有其他方法可以達到同樣的目標。另一種方法是，而不是初始化該值，以在滑塊中觸發事件。