JavaScript Slider问题

Question

在我的网站上我有一个滑块，滑块的值为500 - 2500，步长为100。我有一些代码可以获取值，并将值与链接相关联，因此按钮的链接会根据滑块显示的值而变化。我遇到的问题是，当网站首次加载时，如果你在没有移动滑块的情况下点击“go”按钮，它将不会带你到我为该值设置的链接，但在控制台中出错弹出，说“无法连接到路由 / 500（如果值为500）。但是，一旦我移动滑块，脚本似乎激活，并点击”go“按钮另外一个值。那我怎么做才能让我的脚本立即激活？这是代码

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');

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

＆＃13;

＆＃13;

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');
}

＆＃13;

#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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

还有其他方法可以达到同一目标。另一种方法是，而不是初始化值，以在滑块中触发事件。