无法将 javascript 中的 eventListener 添加到 css 创建的箭头
[英]Unable to add eventListener in javascript to the arrow created by css
问题描述
I'm working on an image slider content using html, css and javascript.
我正在使用 html、css 和 ZDE9B9ED78D7E2E1DCEEFFEE780E2F91 处理图像 slider 内容For moving to the next and previous images i have created arrows using css and they appear in the web page.为了移动到下一个和上一个图像，我使用 css 创建了箭头，它们出现在 web 页面中。 But when trying to add an eventListener to that arrow, it shows unable to add.但是当尝试向该箭头添加事件监听器时，它显示无法添加。 Below are my html and css code:下面是我的 html 和 css 代码：
let sliderImages = document.querySelectorAll(".slide"); let arrowLeft = document.querySelector("#arrow-left"); let arrowRight = document.querySelector("#arrow-right"); let current = 0; // Clear all images function reset() { for (let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = "none"; } } // Init slider function startSlide() { reset(); sliderImages[0].style.display = "block"; } // Show prev function slideLeft() { reset(); sliderImages[current - 1].style.display = "block"; current--; } // Show next function slideRight() { reset(); sliderImages[current + 1].style.display = "block"; current++; } // Left arrow click arrowLeft.addEventListener("click", function() { if (current === 0) { current = sliderImages.length; } slideLeft(); }); // Right arrow click arrowRight.addEventListener("click", function() { if (current === sliderImages.length - 1) { current = -1; } slideRight(); }); startSlide();
.arrow { cursor: pointer; position: absolute; top: 50%; margin-top: -35px; width: 0; height: 0; border-style: solid; } #arrow-left { border-width: 30px 40px 30px 0; border-color: transparent #fff transparent transparent; left: 0; margin-left: 30px; } #arrow-right { border-width: 30px 0 30px 40px; border-color: transparent transparent transparent #fff; right: 0; margin-right: 30px; }
<div class="wrap"> <div id="arrow-left" class="arrow">.</div> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> <span>Welcome to Bruno's Pizzeria</span> </div> </div> <div class="slide slide2"> <div class="slide-content"> <span>Welcome to Bruno's Pizzeria</span> </div> </div> <div class="slide slide3"> <div class="slide-content"> <span>Welcome to Bruno's Pizzeria</span> </div> </div> </div> <div id="arrow-right" class="arrow">.</div> </div>
The browser shows the below error:浏览器显示以下错误：
Uncaught TypeError: Cannot read property 'addEventListener' of null
at slider.js:34
2 个解决方案
解决方案1
1 已采纳 2020-08-04 15:49:33
Your JavaScript is correct.您的 JavaScript 是正确的。 But I think the problem is in the sequence of loading the webpage.但我认为问题在于加载网页的顺序。 For your code to work properly you need to make sure the javascript file loads after the HTML file is rendered completely (since it uses DOM elements).为了使您的代码正常工作，您需要确保在 HTML 文件完全呈现后加载 javascript 文件（因为它使用 DOM 元素）。
Here are some ways to make sure the JavaScript file loads after the HTML这里有一些方法可以确保在 HTML 之后加载 JavaScript 文件
- Add the script tag after or just before the closing body tag在结束正文标记之后或之前添加脚本标记
...
</body>
<script src="script.js"></script>
</html>
- Add
deferattribute in the script tag在脚本标签中添加defer属性
<head>
...
<script src="script.js" defer></script>
...
- Use load event of window as使用 window 的加载事件作为
window.addEventListener('load', function(){
// your complete code
})
// OR
window.onload = function(){
// your code
}
解决方案2
0 2020-08-04 16:11:25
include your slider.js file at last of HTML body tag.在 HTML 主体标签的最后包含您的slider.js文件。 Because arrow-left & arrow-right DOM element will have access only after it loaded.因为 arrow-left 和 arrow-right DOM 元素只有在加载后才能访问。
let sliderImages = document.querySelectorAll(".slide"); let arrowLeft = document.querySelector("#arrow-left"); let arrowRight = document.querySelector("#arrow-right"); let current = 0; // Clear all images function reset() { for (let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.display = "none"; } } // Init slider function startSlide() { reset(); sliderImages[0].style.display = "block"; } // Show prev function slideLeft() { reset(); sliderImages[current - 1].style.display = "block"; current--; } // Show next function slideRight() { reset(); sliderImages[current + 1].style.display = "block"; current++; } // Left arrow click arrowLeft.addEventListener("click", function() { if (current === 0) { current = sliderImages.length; } slideLeft(); }); // Right arrow click arrowRight.addEventListener("click", function() { if (current === sliderImages.length - 1) { current = -1; } slideRight(); }); startSlide();
.arrow { cursor: pointer; position: absolute; top: 50%; margin-top: -35px; width: 0; height: 0; border-style: solid; } #arrow-left { border-width: 30px 40px 30px 0; border-color: transparent #fff transparent transparent; left: 0; margin-left: 30px; } #arrow-right { border-width: 30px 0 30px 40px; border-color: transparent transparent transparent #fff; right: 0; margin-right: 30px; }
<div class="wrap"> <div id="arrow-left" class="arrow"><<</div> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> <span>Welcome to Bruno's Pizzeria 1</span> </div> </div> <div class="slide slide2"> <div class="slide-content"> <span>Welcome to Bruno's Pizzeria 2</span> </div> </div> <div class="slide slide3"> <div class="slide-content"> <span>Welcome to Bruno's Pizzeria 3</span> </div> </div> </div> <div id="arrow-right" class="arrow">>></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.