¡Estoy tratando de crear una presentación de diapositivas pero addEventListener no funciona!
Soy principiante en js world y quiero mejorar con proyectos, pero este simple proyecto me ha dejado perplejo.
const nextBtn = document.querySelector(".next-btn"); const prevBtn = document.querySelector(".prev-btn"); const slides = document.querySelectorAll(".slide"); const slider = document.querySelector(".slider"); const slideIcons = document.querySelectorAll(".slide-icon"); // selecting total number of slides const numberOfSlides = slides.length; // whatever const slideNumber = 0; // manual functionality // next-btn nextBtn.addEventListener("click" ,() => { slides.forEach(slide =>{ slide.classList.remove("actve"); }); slideIcons.forEach((slideIcon) => { slideIcon.classList.remove("active"); }); })No entiendo toda la situación, pero como veo que necesita agregar un detector de eventos a su control deslizante, le daré información adicional sobre el controlador de eventos del control deslizante de rango
// this stores the value at startup (which is why you're always getting 1) var rangeInput = document.getElementById("rangeinput").value;Debería estar leyendo el valor en el controlador en su lugar:
function testtest(e) { // read the value from the slider: var value = document.getElementById("rangeinput").value; // now compare: if (value > 0 && value < 5) { alert("First"); } else { alert("Second"); } }ahora actualizando el valor del rango
También parece que desea actualizar el elemento de salida con el valor del rango. Lo que estás haciendo actualmente es referirte al elemento por id:
onchange="rangevalue.value=value"Sin embargo, que yo sepa, este no es un comportamiento estándar; no puede referirse a los elementos solo por su id; debe recuperar el elemento y luego establecer el valor a través del DOM.
¿Puedo sugerirle que agregue un detector de cambios a través de javascript?
rangeInput.addEventListener("change", function() { document.getElementById("rangevalue").textContent = rangeInput.value; }, false);Por supuesto, tendrá que actualizar el código para usar addEventListener o addedEvent dependiendo de los navegadores que desee admitir; aquí es donde JQuery realmente se vuelve útil.
Usa el evento mouseup para eso. var rangeInput = document.getElementById("rangeinput");
rangeInput.addEventListener('mouseup', function() { if (this.value > 0 && this.value < 5) { alert("First"); } else{ alert("Second"); } });También puede usar el método FORMs oninput :
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" />100 + <input type="number" name="a" value="10" /> = <output name="result"></output> </form>Esto tiene una ventaja sobre onclick/onmouseup porque maneja el caso en el que el control deslizante se mueve usando el teclado (tabulación a la entrada y use las teclas de flecha)
Intente darle a sus elementos html una identificación y luego use getElementById en lugar de querySelector