BotBeta
Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Claro, aquí tienes un código JavaScript que escucha el evento
input del elemento <input type="range"> y actualiza el contenido del <span> en tiempo real a medida que se mueve el control deslizante.### HTML y JavaScript
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambio de Calificación</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
const rangeInput = document.querySelector('.calpro');
const displaySpan = document.querySelector('.liamps');
// Función para actualizar el texto del span
function updateDisplay() {
displaySpan.textContent = rangeInput.value;
}
// Evento para detectar cambios en el range
rangeInput.addEventListener('input', updateDisplay);
// Inicializar el valor en el span
updateDisplay();
});
</script>
</head>
<body>
<input type="range" required min="1" max="5" value="5" class="calpro" name="calificationpro" />
<span class="liamps">5</span>
</body>
</html>### Explicación:
1. Evento
DOMContentLoaded: Espera a que todo el contenido del DOM se cargue antes de ejecutar el código JavaScript.2. Selección de Elementos: Se selecciona el
<input> de tipo range ( [.calpro] ) y el <span> ( [.liamps] ) para actualizarlos.3. Función
updateDisplay: : Cambia el texto del <span> con el valor actual del control deslizante.4. Evento
input:: Se añade un listener de eventos que activa la función updateDisplay cada vez que se mueve el control deslizante.5. Inicialización: Al cargar la página, se llama a la función
updateDisplay() para asegurarse de que el valor inicial también se muestre correctamente.Con este código, cada vez que cambies la posición del control deslizante, el valor en el
<span> se actualizará automáticamente.
