问初学者HTML和Javascript:将输入滑块值更改为paragraphField.innerHTML

EN

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

<div id="rateUs">
  <h1>Rate Our Restaurant</h1>
	
	<p style="float:right;text-align:right;">Excellent</p>
  <p style="float:left;text-align:left;">Very Poor</p>
	<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>

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

var ratingSlider=document.getElementById("slider");
ratingSlider=addEventListener("blur", moveSlider);
	
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>