JavaScript Slider問題

Question

在我的網站上，我有一個滑塊，該滑塊的值介於500-2500之間，步長為100。 我有一些代碼將采用該值，並將該值與鏈接相關聯，因此按鈕的鏈接會根據滑塊顯示的值而變化。 我遇到的問題是，當首次加載網站時，如果您在不移動滑塊的情況下按下“轉到”按鈕，則不會將您帶到我為該值設置的鏈接，但是在控制台中會出現錯誤彈出窗口，提示“無法連接到路由 / 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

問題似乎在您的初始化上。 您正在使用滑塊的值進行初始化：

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> 

還有其他方法可以達到相同的目標。 另一種方式是代替初始化值來觸發滑塊中的事件。