Question

大学课堂作业：

以下是我页面的html代码。赋值是转换滑块范围1-10，这样当有人进入1-4时，会有一个文本段落进行注释。当用户输入6-10时，段落中将有不同的注释。或者更好的是，每个评级从1到10单独评论。

以下是我到目前为止所提出的内容，但我甚至不确定自己是否走在正确的轨道上。如何从滑块中获取值？

var ratingSlider=document.getElementById("slider");
ratingSlider=addEventListener("blur", moveSlider);
	
function moveSlider() {
  var sliderField=document.getElementById("slider");
  var rating=sliderField.value;
  var theCritique="Yeah, man!";
  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 1

我重构了您的上述代码，下面的代码将为您提供所需的精确输出。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

你不希望这里有blur事件，因为当元素失去焦点时会触发，当你放开滑块时不会触发，当另一个元素获得远离滑块。您需要input和/或change个事件（跨浏览器解决方案可能需要这两个）。

您还需要一个if/then语句来确定要显示的消息和时间。

您还遇到了一些语法问题和不必要的代码。有关详细信息，请参阅注释：

＆＃13;

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

＆＃13;

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

＆＃13;

这应该让你开始，但如果你对1到10的每个值的不同评论感兴趣，我会给你一个提示 - 一个数组可以帮助你，你将能够得到摆脱整个if/then陈述。

Answer 3

您可以这样做，如果您想添加更多条件，可以添加更多else if。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: