Блог

Главная - Вопросы по программированию - target.addEventListener(«click», () =>{ Не работает?

target.addEventListener(«click», () =>{ Не работает?

#javascript #css #onclick #addeventlistener

Вопрос:

Я пытаюсь создать слайд-шоу, но addEventListener не работает!!
я новичок в мире js и хочу стать лучше с помощью проектов, но этот простой проект поставил меня в тупик.

 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");
      });
})

Комментарии:

1. Вы могли бы попытаться добавить журнал консоли перед addEventListener , чтобы увидеть, является ли nextButton это правильным элементом, затем вы могли бы попытаться добавить другой элемент в обратный вызов события, чтобы увидеть, запущено ли оно

2. Вы уверены actve , что это не active первый класс, который вы пытаетесь удалить?

Ответ №1:

Я не понимаю всей ситуации, но, как я вижу, вам нужно добавить прослушиватель событий к вашему слайдеру, поэтому я дам вам пример обработчика событий слайдера диапазона

 // this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;

Вместо этого вы должны читать значение в обработчике:

 function testtest(e) {
    // read the value from the slider:
    var value = document.getElementById("rangeinput").value;
    // now compare:
    if (value > 0 amp;amp; value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

теперь обновление значения диапазона

Также похоже, что вы хотите обновить выходной элемент значением диапазона. То, что вы сейчас делаете, — это обращение к элементу по идентификатору:

 onchange="rangevalue.value=value"

Однако, насколько я знаю, это не стандартное поведение; вы не можете ссылаться на элементы только по их идентификатору; вы должны извлечь элемент, а затем установить значение через DOM.

Могу ли я предложить вам добавить прослушиватель изменений с помощью javascript:

 rangeInput.addEventListener("change", function() {
    document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);

Конечно, вам придется обновить код, чтобы использовать addEventListener или attachEvent в зависимости от браузеров, которые вы хотите поддерживать; именно здесь jQuery действительно становится полезным.

Для этого используйте событие наведения курсора мыши. var rangeInput = document.getElementById(«rangeinput»);

 rangeInput.addEventListener('mouseup', function() {
    if (this.value > 0 amp;amp; this.value < 5) {
        alert("First");
    } else{
        alert("Second");
    }
});

Вы также можете использовать метод 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>

Это имеет преимущество перед onclick / onmouseup, поскольку оно обрабатывает случай, когда ползунок перемещается с помощью клавиатуры (табуляция для ввода и использование клавиш со стрелками)

Ответ №2:

Попробуйте присвоить элементам html идентификатор, а затем использовать getElementById вместо querySelector

Метки: ,