1

tengo un problema y quiero que según modifique la barra del input cambie el el 40 de la pantalla por el numero que disminuyo o aumento en la barra barra de rango por alguna razon o me sale indefinido o me da error gracias

function Mostrar() {
  let barraDeTiempo = document.getElementById(`barraDeTiempo`).value;
  let cajaNumeral = document.getElementById(`cajaNumeral`).value;
  barraDeTiempo.innerHTML = cajaNumeral;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Metronomo</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div>
    <div>
      <p id="cajaNumeral"> 40 </p>
    </div>
    <span> 
            <input onclick="Mostrar()" id="barraDeTiempo" type="range" min="40" max="200" value="PPM">
            <button onclick="Stop()">Detener</button>
        </span>
  </div>
  <script src="main.js"></script>
</body>

</html>

1 respuesta 1

1

Hay varias cosas a corregir en tu código:

  • No es recomendable poner los eventos en la misma etiqueta, porque complica el mantenimiento de tus scripts; es mejor si desde Javascript obtienes el elemento y asignas el evento con addEventListener()
  • Al menos para este caso, es mejor declarar variables de los elementos y obtener o asignar valor con sus propiedades y, de preferencia, fuera de la función, porque seguramente las vas a necesitar para otras acciones
  • El valor del campo debe ser numérico y estás asignando texto value="PPM"
  • Hay que saber las diferencias entre cada evento para saber cuál usar:
    • click: Solo cuando haces clic en determinada zona del campo, pero no al arrastrar
    • change: Solo al terminar de aplicar cambios (clic o después de arrastrar)
    • input: Siempre que se haga un cambio, ya sea con clic o mientras arrastras
  • Con esta línea barraDeTiempo.innerHTML = cajaNumeral; estàs modificando la barra de tiempo con el texto del otro elemento; debe ser al revés, poner el valor de la barra como texto

// Obtener elementos globales, fuera de la función
let barraDeTiempo = document.getElementById(`barraDeTiempo`);
let cajaNumeral = document.getElementById(`cajaNumeral`);
// Asignar evento a barra
barraDeTiempo.addEventListener('input', mostrar);
// Función para actualizar
function mostrar() {
    // Asignar a caja el valor de la barra
    cajaNumeral.innerHTML = barraDeTiempo.value;
}
  <div>
    <div>
      <p id="cajaNumeral">40</p>
    </div>
    <span> 
            <input id="barraDeTiempo" type="range" min="40" max="200" value="40">
            <button>Detener</button>
        </span>
  </div>

1
  • Muchas gracias por tu ayuda
    – PeriCless
    Commented el 17 ene. 2022 a las 18:17

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.