How to target li within ul without using IDs?
Question
I'm trying to attach eventListeners to each of these li within a ul of my HTML. This is for a homework assignment, so I cannot alter the HTML at all. Here is my HTML, the li I am trying to alter are the two buttons within the ul class 'pagination':
<body>
<!-- Gallery HTML -->
<section id="gallery">
<h2>Image <strong>Gallery</strong></h2>
<!-- Gallery Image & Details -->
<article>
<p><img
src="images/winter.jpg"
alt="Winter Landscape: Snow covered mountains">
</p>
<h3>Image Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<!-- Thumbnail Pagination -->
<ul class="pagination">
<li><button>previous</button></li>
<li><button>next</button></li>
</ul>
</section>
<!-- Javascript -->
<script src="js/gallery.js"></script>
</body>
I tried this in my JavaScript:
let nextButton = pageSection.getElementsByTagName('li:first-of-type');
let prevButton = pageSection.getElementsByTagName('li:last-of-type');
However, if I console.log(nextButton) or console.log(prevButton), they both return as HTMLcollection [] within the browser console. I'm not sure if it is targeting it right.
Here is an example of the eventListener:
nextButton.addEventListener("click", function changeImageNext(){
for (i = 0; i < templateArray.length; i++){
// console.log(articles[i]+ " " + i);
activeArticle = articles.length[i + 1];
// inserts the updated html into the html file
galleryHeading.insertAdjacentHTML('afterend',templateArray[i]);
}
});
But it returns as this error within the browser: Uncaught TypeError: nextButton.addEventListener is not a function
I just started learning JavaScript and HTML this week, so I'm not well-versed yet. Also, I cannot use JQuery or any kind of frameworks!
Thanks for your help!
3 answers
solution1
1 ACCPTED 2019-11-06 20:57:20
Since you know you have two li 's insides of .pagination , you can use document.querySelectorAll , which returns an array of elements. Simply target the index of the element in the array. Example:
let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];
prevButton.addEventListener('click', (event) => {
});
nextButton.addEventListener('click', (event) => {
});
solution2
0 2019-11-06 20:57:09
document.getElementsByTagName("LI")
This will return you a list of all the li tags. Loop over that list, select by index, do whatever you want with it.
Since you have no other li in the body you don't really need to worry about any special selectors
"li:last-of-type" isn't correct but getElementsByTagName is only looking to accept a tag name to look for. Not any special sudo classes
solution3
0 2019-11-06 21:01:32
try it:
let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.