gpt4 book ai didi

javascript - 初学者 HTML 和 Javascript : Changing input slider values to paragraphField. innerHTML

转载 作者:行者123 更新时间:2023-12-03 03:07:13 25 4
gpt4 key购买 nike

大学类作业:

下面是我的页面的 html 代码。作业是转换 slider 范围1-10,以便当有人输入1-4时会有一个文本段落进行评论。当用户输入6-10时,该段落中将会出现不同的注释。或者更好的是,为从 1 到 10 的每个评分提供单独的评论。

下面是我到目前为止所想到的,但我什至不确定我是否走在正确的轨道上。如何从 slider 获取值?

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>

最佳答案

我已经重组了您上面的代码,下面的代码将给出您需要的准确输出。

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>

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

关于javascript - 初学者 HTML 和 Javascript : Changing input slider values to paragraphField. innerHTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47114189/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com