Проблема со слайдером JavaScript ⇐ Jquery

[Anonymous]

На моем веб-сайте есть ползунок, значение ползунка составляет от 500 до 2500, с шагом 100. У меня есть фрагмент кода, который принимает значение и сопоставляет его со ссылкой, поэтому ссылка кнопки меняется в зависимости от значения, отображаемого ползунком. Проблема, с которой я столкнулся, заключается в том, что при первой загрузке веб-сайта, если вы нажмете кнопку «Перейти», не перемещая ползунок, вы не перейдете к ссылке, которую я установил для значения, но в консоли всплывает ошибка, в которой говорится: «Невозможно подключиться к route/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 */
}

Код: Выделить всё

Choose Budget




[list]
[*]
Price Point: $

[url=#]Go[/url]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/466 ... ider-issue