JavaScriptスライダの問題

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

がある問題は、あなたの初期化にあると思われる。あなたは、sの値で初期化されていますLIDER：

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>

同じ目標に達する他の方法があります。別の方法は、値を初期化する代わりに、スライダーでイベントをトリガーすることです。