JavaScript滑块问题

在我的网站上我有一个滑块，滑块的值在500-2500之间，有100步。我有一段代码，它将获取值，并将值与链接相关联，因此按钮的链接根据滑块显示的值而变化。我遇到的问题是，当网站第一次加载时，如果您在不移动滑块的情况下点击“go”按钮，它不会将您带到我为该值设置的链接，但在控制台中会弹出一个错误，即“无法连接到route/500（如果该值为500）。然而，一旦我移动滑块并点击另一个值上的“go”按钮。那么我如何使它使我的脚本立即激活？下面是代码

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
var link=document.getElementById（“链接”）；
output.innerHTML=slider.value；//显示默认的滑块值
link.setAttribute（'href'，slider.value）；
//更新当前滑块值（每次拖动滑块控制柄时）
slider.oninput=函数（）{
output.innerHTML=this.value；
如果（此.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'）；
其他的
link.setAttribute（'href'，'bing.html'）；
}

#slidecontainer{
宽度：50%；
/*外部容器的宽度*/
左边距：自动！重要；
右边距：自动！重要；
}
/*滑块本身*/
.滑块{
-webkit外观：无；/*覆盖默认CSS样式*/
外观：无；
宽度：100%；/*全宽*/
高度：25px；/*指定高度*/
背景：#D3；/*灰色背景*/
大纲：无；/*删除大纲*/
不透明度：0.7；/*设置透明度（用于鼠标悬停时的鼠标悬停效果）*/
-webkit转换：.2s；/*0.2秒悬停转换*/
转变：不透明度；
}
/*鼠标悬停效果*/
.滑块：悬停{
不透明度：1；/*鼠标悬停时完全显示*/
}
/*滑块手柄（使用webkit（Chrome、Opera、Safari、Edge）和moz（Firefox）覆盖默认外观）*/
.滑块：：-webkit滑块拇指{
-webkit外观：无；/*覆盖默认外观*/
外观：无；
宽度：25px；/*设置特定的滑块手柄宽度*/
高度：25px；/*滑块手柄高度*/
背景：#4CAF50；/*绿色背景*/
光标：指针；/*光标悬停*/
}
.滑块：：-moz范围拇指{
宽度：25px；/*设置特定的滑块手柄宽度*/
高度：25px；/*滑块手柄高度*/
背景：#4CAF50；/*绿色背景*/
光标：指针；/*光标悬停*/
}

选择预算


价格点：$

问题似乎出在您的初始化上。您正在使用滑块的值进行初始化：

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

但是您希望它是

500.html

，而不是

500

（滑块在其开始位置上的值）

解决此问题的一种方法是使用正确的值初始化链接：

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

另一种方法（我的首选方法）是完全删除初始化，并通过调用处理滑块逻辑的函数进行初始化（我复制了下面的代码，并更改为这样做）：

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
var link=document.getElementById（“链接”）；
output.innerHTML=slider.value；//显示默认的滑块值
sliderHandler.apply（slider）；//通过调用处理程序初始化链接的值
//更新当前滑块值（每次拖动滑块控制柄时）
slider.oninput=sliderHandler；
函数sliderHandler（）{
output.innerHTML=this.value；
如果（此.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'）；
其他的
link.setAttribute（'href'，'bing.html'）；
}

#slidecontainer{
宽度：50%；
/*外部容器的宽度*/
左边距：自动！重要；
右边距：自动！重要；
}
/*滑块本身*/
.滑块{
-webkit外观：无；/*覆盖默认CSS样式*/
外观：无；
宽度：100%；/*全宽*/
高度：25px；/*指定高度*/
背景：#D3；/*灰色背景*/
大纲：无；/*删除大纲*/
不透明度：0.7；/*设置透明度（用于鼠标悬停时的鼠标悬停效果）*/
-webkit转换：.2s；/*0.2秒悬停转换*/
转变：不透明度；
}
/*鼠标悬停效果*/
.滑块：悬停{
不透明度：1；/*鼠标悬停时完全显示*/
}
/*滑块手柄（使用webkit（Chrome、Opera、Safari、Edge）和moz（Firefox）覆盖默认外观）*/
.滑块：：-webkit滑块拇指{
-webkit外观：无；/*覆盖默认外观*/
外观：无；
宽度：25px；/*设置特定的滑块手柄宽度*/
高度：25px；/*滑块手柄高度*/
背景：#4CAF50；/*绿色背景*/
光标：指针；/*光标悬停*/
}
.滑块：：-moz范围拇指{
宽度：25px；/*设置特定的滑块手柄宽度*/
高度：25px；/*滑块手柄高度*/
背景：#4CAF50；/*绿色背景*/
光标：指针；/*光标悬停*/
}

选择预算


价格点：$

最简单的修复方法是将行

link.setAttribute（'href'，slider.value）；

替换为

link.setAttribute（'href'，500.html'）；

（问题中脚本的第五行）