Javascript, если значение ползунка = 20, текст на дисплее

-3

Я сделал слайдер с использованием html и CSS, который отображает его значение при изменении. Я создал его с помощью CSS, используя тег <style>. Затем я перешел к отображению значения. Я хочу отобразить «Стартер», когда ползунок достигает 20. Я не знаю, что я делаю неправильно, и почему это не работает для меня. Я бы хотел использовать самую удобную для пользователя версию. Если возможно, объясните, что я сделал неправильно.Javascript, если значение ползунка = 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" 
}

Как я могу получить свой ползунок RESET на значение 0?

на данный момент, если я перехожу от 20 до 0, он остается отображающим стартер, я бы хотел его удалить. Это возможно?

источник

2015-03-17 Chad Masters

'' тег является корневой элемент, который включает в себя остальную часть вашего кода. вы просто не закрываете его в середине документа. лучший совет, который я могу вам дать, - это следовать учебникам [здесь] (http://www.w3schools.com). – Banana

Смотрите этот вопрос, а также: Range Slider Event Handler Javascript

Вы собираетесь посмотреть в event listeners - вы хотите, чтобы слушатель, связанный с ползунком, так что, когда пользователь изменяет значение, ваш код может ответьте соответствующим образом.

источник

2015-03-17 18:30:24

вам нужно '==' вместо '=' с вашей, если заявление

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

источник

2015-03-17 18:31:33

Вы должны слушать onchange события. Кроме того, для сравнения значений вам необходимо использовать == вместо =. Следующий код должен работать -

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

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

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

источник

2015-03-17 18:34:54

как я могу сбросить переменную? Скажем, например, я использовал код: уага стартера = "Привет мир", если (стартер == 20) { document.write (стартер) } Поскольку им с помощью ползунка, когда это значение (staretrs) = 20, он должен отображать для меня «мир привет», но когда он идет на него во второй раз, он просто вставляет его под ним. Как я могу сбросить функцию? Предпочитал, если бы я мог встроить его в существующую функцию, поэтому в начале активации функции она очищает страницу и вставляет то, что мне нужно, чтобы видеть –

Javascript, если значение ползунка = 20, текст на дисплее

ответ

Смежные вопросы