JavaScript Slider Issue

Question

On my website I have a slider, and the slider has a value from 500 - 2500, with 100 step. I have a bit of code that will take the value, and correlate the value with a link, so the button's link changes depending on the value the slider shows. The issue I am having, is when the website is first loaded up, if you hit the "go" button without moving the slider, it won't take you to the link that I have set for the value, but in console an error pops up, that says "can't connect to route /500 (if the value were 500). However, the script seems to activate once I move my slider, and hit the "go" button on another value. So how do I make it so my script activates right away? Here is the code

 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

The problem seems to be on your initialisation. Your are initialising with the value of the slider:

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

But you would want it to be 500.html instead of 500 (the value of the slider on its start position).

One way to solve this issue is to initialize the link with the correct value:

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

Another way (my preferred way) is to remove the initialization altogether and initialize by calling the function the handles the slider's logic (I've copied your code below and change to do that way):

 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> 

There are other ways of reaching the same goal. Another way would be, instead of initializing the value, to trigger the event in slider.