我正在尝试创建一个幻灯片，但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");
});
})
我不清楚整个情况但我知道你需要在滑动器中添加事件监听器所以我要给你一个关于范围滑动器事件处理程序的ex
// 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 && value < 5) {
alert("First");
} else {
alert("Second");
}
}
现在更新范围值
看起来您还想用范围的值更新输出元素。你现在做的是通过id:
引用元素onchange="rangevalue.value=value"
然而，据我所知，这不是标准行为;不能仅通过id来引用元素;您必须检索元素，然后通过DOM设置值。
我建议你通过javascript添加一个变化监听器:
rangeInput.addEventListener("change", function() {
document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);
使用鼠标事件。var rangeInput = document.getElementById(" rangeInput ";
rangeInput.addEventListener('mouseup', function() {
if (this.value > 0 && this.value < 5) {
alert("First");
} else{
alert("Second");
}
});
<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有一个优势因为它可以处理使用键盘移动滑块的情况(tab键为输入并使用方向键)
试着给你的html元素一个id，然后使用getElementById而不是querySelector