Question

我使用html和CSS创建了一个滑块，它在更改时显示其值。我使用<style>标签使用CSS来设置它。然后我继续制作值显示文本。我想要显示＆＃34; Starter＆＃34;当滑块击中20时。我不知道自己做错了什么以及为什么这对我不起作用。我想使用最友好的用户版本。如果可能的话，请解释我做错了什么。

<html>
<style>
 input[type="range"] {
  -webkit-appearance: none;
   width: 100%;
   height: 25px;
   border: 1px solid;
   background-color: #0066FF;
}
   input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border: 1px solid;
    background-color: #FFF;

}
 </style>
 </html>
 <form oninput="amount.value=rangeInput.value">

 <input type="range" id="rangeInput" name="rangeInput" step="20" value="0">
 <div align="center" style="font-size:25px;"><output name="amount"     for="rangeInput">0</output></div>

 </form>
 <script type="text/javascript">
 var rangeInput = document.getElementById("rangeInput").value
 if(rangeInput = 20){
 text = "starter"
 }

如何让我的滑块在值0上重置？

此刻，如果我从20变为0，它仍然显示Starter，我希望它删除它。这可能吗？

Answer 1

你的if语句需要'=='而不是'='

var rangeInput = document.getElementById("rangeInput").value
 if(rangeInput == 20){
 text = "starter"
 }

Answer 2

同时查看此问题：Range Slider Event Handler Javascript

您想要查看event listeners - 您希望将一个侦听器绑定到滑块，以便在用户更改值时，您的代码可以做出相应的响应。

Answer 3

您需要收听onchange事件。此外，您需要使用==代替=来比较值。以下代码应该有效 -

＆＃13;

function updateValue() {
  var rangeInput = document.getElementById("rangeInput").value
  if (rangeInput == 20) {
    document.getElementById("text").innerHTML = 'starter'
  } else {
    document.getElementById("text").innerHTML = ''
  }
}

＆＃13;

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  border: 1px solid;
  background-color: #0066FF;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: 1px solid;
  background-color: #FFF;
}

＆＃13;

<form oninput="amount.value=rangeInput.value">

  <input type="range" id="rangeInput" name="rangeInput" step="20" value="0" onchange="updateValue()">
  <div align="center" style="font-size:25px;">
    <output name="amount" for="rangeInput">0</output>
  </div>
</form>

<div id="text"></div>

＆＃13;

Javascript如果滑块值= 20，则显示文本

3 个答案: