1

Tengo un slider funcional hecho en HTML y me arroja el valor del slider conforme se mueve (Dentro del rango especificado), pero necesito tomar ese valor y ejecutar una función según dicho valor. Intenté usando la propiedad value para darle el valor a la variable "followers7" y también con getElementByID pero no encuentro otra manera de darle a la variable "followers7" (o que la función capture) el valor del slider, ¿Cómo puedo hacerlo?, ¿Hay algo mal en el código?.

El código html es:

<div class="slidecontainer2"> 
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange2" height= "2"> 
  <label>Value: <span id="demo2"/></label><br> 
  <label>Ganancia estimada: <br><input type="number" name="sum7" value="0" readonly="readonly" /></label>
</div>

Y el script es:

<script>
var slider = document.getElementById("myRange2"),
output = document.getElementById("demo2");
output.innerHTML = slider.value; 

slider.oninput = function Calculate7(){
  output.innerHTML = this.value;
  try{
  var followers7 = document.getElementById("myRange2"),
        followersReached7 = followers7 * 2,
        averageSale7= followersReached7 * 2,
        estimateEarning7= averageSale7 * 2;
  
  document.slidecontainer2.sum7.value = estimateEarning7;
    } catch (e){}
}
</script>

1 respuesta 1

0

Hay algunas cosas por corregir:

  • No es recomendable asignar funciones a eventos por nombre elemento.evento, es mejor usar addEventListener que te da mayor flexibilidad, principalmente porque puedes asignar tantos como sean necesarios en lugar de solo 1 como en la primera opción
  • Te recomiendo usar el evento change en lugar de input, suele ser más adecuado en la mayoría de los casos, aunque tal vez no sea tan relevante en este tipo de campo
  • No necesitas un bloque try / catch, puedes hacer las operaciones usando parseInt() y agregando || 0 al final para prevenir errores

Nota: Cambié el método para seleccionar elementos de getElementById() por querySelector(); funciona prácticamente igual con ambos, pero en el caso de la suma, resulta mucho más fácil acceder por nombre de campo que buscar primero contenedores previos.

let slider = document.querySelector('#myRange2');
let output = document.querySelector('#demo2');
let earning = document.querySelector('[name="sum7"]');

output.innerHTML = slider.value; 

slider.addEventListener('change', function() {
    output.textContent = this.value;
    earning.value = parseInt(this.value * 6) || 0;
});
<div class="slidecontainer2"> 
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange2" height= "2"> 
  <label>Value: <span id="demo2"/></label><br> 
  <label>Ganancia estimada: <br><input type="number" name="sum7" value="0" readonly="readonly" /></label>
</div>

1
  • Funcionó, muchas gracias por las correcciones, tendré en cuenta esos detalles a partir de ahora Commented el 14 jul. 2022 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.