初心者のHTMLとJavascript：入力スライダの値をparagraphField.innerHTMLに変更する

Question

大学のクラス割り当て：

以下は自分のページのためのhtmlコードです。割り当ては、誰かが1-4を入力したときにコメントを付けるテキスト段落があるように、スライダー範囲1〜10を変換することです。ユーザーが6-10を入力すると、段落に異なるコメントが表示されます。または、各評価の別のコメントを1から10にしてください。

以下は私が今までに思いついたものですが、正しいトラックにいるかどうかはわかりません。スライダから値を取得するにはどうすればよいですか？

var ratingSlider=document.getElementById("slider"); 
 
ratingSlider=addEventListener("blur", moveSlider); 
 
\t 
 
function moveSlider() { 
 
    var sliderField=document.getElementById("slider"); 
 
    var rating=sliderField.value; 
 
    var theCritique="Yeah, man!"; 
 
    var paragraphField = document.getElementById("critique"); 
 
    paragraphField.innerHTML = theCritique; 
 
} \t

<div id-"rateUs"> 
 
    <label>Rate Our Restaurant</label> 
 
    <p style="text-align:right;">Excellent</p> 
 
    <input id="slider" type="range" min="1" max="10" step="1" name=rateUs> 
 
    <p style="text-align:left;">Poor</p> 
 
    <p id="critique"></p> 
 
</div>

Answer 1

要素はあなたがスライダーを手放すとき、それは時に他の要素になりますではありませんフォーカスを失うとき、それが発火するので、あなたはここにblurイベントを望んでいませんスライダからフォーカスを離します。 inputおよび/またはchangeイベントが必要です（クロスブラウザソリューションの場合は両方が必要な場合があります）。

表示するメッセージを決定するには、if/thenステートメントも必要です。

また、構文上の問題や不要なコードがありました。詳細についてはコメントを参照してください：

// Get the references you need once 
 
var ratingSlider = document.getElementById("slider"); 
 
var paragraphField = document.getElementById("critique"); 
 
    
 
// You had ratingSlider=addEventListener, but it should be: 
 
ratingSlider.addEventListener("input", moveSlider); 
 
\t 
 
function moveSlider() { 
 
    var message = ""; 
 
    // The + right in front of ratingSlider explicitly converts the string 
 
    // coming from the HTML value to a number so that a math comparison can be done 
 
    if(+ratingSlider.value <= 4){ 
 
    message = "No way!"; 
 
    } else { 
 
    message = "Yeah, man!"; 
 
    } 
 
    
 
    // Don't use .innerHTML when you aren't assigning any HTML, it's wastefull 
 
    paragraphField.textContent = message; 
 
}

<!-- No need for an id on the div and don't give an element an id 
 
    that is the same as the name of another, that just leads to confusion. --> 
 
<div> 
 
    <!-- <label> elements are for labeling form fields, not for titles. 
 
     If you use a label, you either need to have it contain the element 
 
     it is a label for, or use the "for" attribute that has the id of 
 
     the element it is labeling. --> 
 
    Rate Our Restaurant 
 

 
    <input id="slider" type="range" min="1" max="10" step="1" name="rateUs"> 
 
</div> 
 
<p style="float:left;width:20%;margin-left:7em;">Poor</p> 
 
<p style="float:left;width:20%;">Excellent</p> 
 
<p id="critique"></p>

この状態で始める必要がありますが、あなたは1〜10の値ごとに異なるコメントに興味があるならば、私はあなたにヒントを与えるだろう - 配列はそれを助け、if/thenステートメント全体を取り除くことができます。

Answer 2

この方法でこれを行うことができます。さらに条件を追加する場合は、else ifを追加できます。

var ratingSlider=document.getElementById("slider"); 
 
ratingSlider=addEventListener("blur", moveSlider); 
 
\t 
 
function moveSlider() { 
 
    var sliderField=document.getElementById("slider"); 
 
    var rating=sliderField.value; 
 
    
 
var theCritique=""; 
 
    if(rating <= 4){ 
 
     theCritique="Yeah, man!"; 
 
    } else { 
 
     theCritique="Another Text!"; 
 
    } 
 

 
    var paragraphField = document.getElementById("critique"); 
 
    paragraphField.innerHTML = theCritique; 
 
}

<div id-"rateUs"> 
 
    <label>Rate Our Restaurant</label> 
 
    <p style="text-align:right;">Excellent</p> 
 
    <input id="slider" type="range" min="1" max="10" step="1" name=rateUs> 
 
    <p style="text-align:left;">Poor</p> 
 
    <p id="critique"></p> 
 
</div>

Answer 3

私はあなたの上記のコードを再構築持って、コードの下にこれは何が必要正確な出力が得られます。

var ratingSlider=document.getElementById("slider"); 
 
ratingSlider.oninput = function() { 
 
\t var sliderValue = this.value; 
 
\t var paragraphField = document.getElementById("critique"); 
 
\t var theCritique = ""; 
 
    if(sliderValue >= 1 && sliderValue <= 2){ 
 
\t \t \t theCritique="very Poor!"; 
 
\t \t \t color = "red"; 
 
\t } else if(sliderValue >= 3 && sliderValue <= 4){ 
 
\t \t theCritique="Poor!"; 
 
\t \t \t color = "#da5757"; 
 
\t } else if(sliderValue >= 6 && sliderValue <= 8){ 
 
\t \t theCritique="Good!"; 
 
\t \t \t color = "#66bd66"; 
 
\t } else if(sliderValue >= 9 && sliderValue <= 10){ 
 
\t \t theCritique="Excellent!"; 
 
\t \t \t color = "green"; 
 
\t } else{ 
 
\t  theCritique="Okay!"; 
 
\t \t \t color = "orange"; 
 
\t } 
 
    paragraphField.innerHTML = theCritique; 
 
\t paragraphField.style.backgroundColor = color; 
 
} \t

<div id="rateUs"> 
 
    <h1>Rate Our Restaurant</h1> 
 
\t 
 
\t <p style="float:right;text-align:right;">Excellent</p> 
 
    <p style="float:left;text-align:left;">Very Poor</p> 
 
\t <div style="clear:both;margin:0 auto;width:50%;"><input id="slider" type="range" min="1" max="10" step="1" name="rateUs"></div> 
 
    <p id="critique" style="padding:10px;"></p> 
 
</div>

https://jsfiddle.net/vijayabal/Lr3s1qyo/1/