Hice una barra deslizante (0-99) que funciona bien. Quiero agregar 2 botones para cambiarlo manualmente (primer botón -1; segundo botón +1). Estaba funcionando bien con mi código "-1" para el primer botón, pero el segundo no funciona y no entiendo por qué. (Agrega 1 pero, por ejemplo, si mi barra deslizante está en 50, cuando hago clic no va a 51 sino a 501).
Aquí está mi código:
<div> <button id="moins1" onclick="moins1()">MOINS 1</button> <span class="unselectable rangeValue1" id="rangeValue1">RR</span> <Input class="range" type="range" name="BarreRR" value="0" min="0" max="99" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)"></Input> <button id="plus1" onclick="plus1()">PLUS 1</button> </div> <script type="text/javascript"> function rangeSlide1(value) { document.getElementById('rangeValue1').innerHTML = value; } function moins1(){ var Yop = document.getElementById('rangeValue1').textContent; Yop -=1; document.getElementById('rangeValue1').innerHTML = Yop; console.log(Yop); } function plus1(){ var Yop = document.getElementById('rangeValue1').textContent; Yop +=1; document.getElementById('rangeValue1').innerHTML = Yop; console.log(Yop); } </script>Gracias por la ayuda, Zartex.
El problema es que textContent devuelve una cadena y el uso del operador + intentará concatenar los valores. Para que puedas analizarlo. Pero recomendaría conectar directamente su rango con el valor mostrado y solo modificar el rango usando los botones o cambiarlos juntos, por ejemplo:
function rangeSlide1(value) { document.getElementById('rangeValue1').innerHTML = value; } function moins1() { let range = document.querySelector('.range') if (range.value != 0) { let newValue = range.value - 1 document.getElementById('rangeValue1').innerHTML = newValue range.value = newValue } } function plus1() { let range = document.querySelector('.range') if (range.value < 99) { let newValue = Number(range.value) + 1 document.getElementById('rangeValue1').innerHTML = newValue range.value = newValue } } <div> <button id="moins1" onclick="moins1()">MOINS 1</button> <span class="unselectable rangeValue1" id="rangeValue1">RR</span> <Input class="range" type="range" name="BarreRR" value="0" min="0" max="99" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)"></Input> <button id="plus1" onclick="plus1()">PLUS 1</button> </div>Teniendo en cuenta que su rango está limitado de 0 a 100, agregué la condición de no pasar por debajo de 0
te ayudará, el valor de Yop siempre está en "50" + 1, volverá por concat 501, así que analiza tu cadena y agrega/menos por 1
function moins1(){ var Yop = document.getElementById('rangeValue1').textContent; Yop = parseInt(Yop)-1; document.getElementById('rangeValue1').innerHTML = Yop; console.log(Yop); } function plus1(){ var Yop = document.getElementById('rangeValue1').textContent; Yop = parseInt(Yop)+1; document.getElementById('rangeValue1').innerHTML = Yop; console.log(Yop); }