Menu
Hi, I built this project. But once the array cycles once I get this error
‘Uncaught TypeError: Cannot read property ‘classList’ of null’
on line 70 and I can’t figure it out. It doesn’t seem to impact anything.
Also, the way the text changes is by adding the text from an array into the innerHTML of the button. Is there any way I could add an animation to the change?
Here’s the code:
``<i>
</i>function showNextImg() {
imgIndex++
const currentImg = document.querySelector('.current-img')
//////////////////
const nextImg = (currentImg.nextElementSibling)?currentImg.nextElementSibling:menuImg[0];
/////////////////
if(imgIndex > menuImg.length - 1) {
imgIndex = 0;
currentImg.classList.remove('current-img')
menuImg[0].classList.add('current-img')
}
currentImg.classList.remove('current-img')
nextImg.classList.add('current-img')
}
function showPrevImg() {
imgIndex--
const currentImg = document.querySelector('.current-img')
/////////////
const nextImg = (currentImg.previousElementSibling) ? currentImg.previousElementSibling : menuImg[menuImg.length-1] ;
//////////////
if(imgIndex < 0) {
imgIndex = menuImg.length - 1;
currentImg.classList.remove('current-img')
menuImg[menuImg.length - 1].classList.add('current-img')
}
currentImg.classList.remove('current-img')
nextImg.classList.add('current-img')
}<i>
</i>
`</CODE>
for your consideration
<CODE>
`<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
font-family: sans-serif;
}
.buttons {
border: none;
background: none;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
background: pink;
padding: 10px 0;
width: 150px;
border-radius: 3px;
cursor: pointer;
}
.buttons:hover{color:red;}
.menu-img__list {
list-style-type: none;
padding: 0;
margin: 20px;
}
.menu-img__item {
width: 200px;
height: 200px;
border-radius: 10px;
display: none;
}
.menu-img__item img{
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
.menu-img__item.current-img {
display: block;
}
</style>
</head>
<body>
<button class="prevButton buttons"></button>
<div class="menu-img">
<ul class="menu-img__list">
<li class="menu-img__item"><img data-food='buger' src="https://images.unsplash.com/photo-1571091655789-405eb7a3a3a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJ1cmdlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"></li>
<li class="menu-img__item"><img data-food='pizza' src="https://www.simigeriapetru.ro/uploads/products/Pizza-Regina-Simigeria-PETRU.png"</li>
<li class="menu-img__item"><img data-food='chicken' src="https://www.seriouseats.com/thmb/hGmf-CklPEWYtGrsB1XIOfldngM=/1500x844/smart/filters:no_upscale()/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__2015__07__20210324-SouthernFriedChicken-Andrew-Janjigian-21-cea1fe39234844638018b15259cabdc2.jpg"</li>
<li class="menu-img__item"><img data-food='icecream' src="https://assets.tmecosys.com/image/upload/t_web767x639/img/recipe/ras/Assets/D032E1F7-FFC9-4483-9CC2-025DF7C1185E/Derivates/383D27F0-A27D-4632-8B32-DE1B658DBB64.jpg"</li>
<li class="menu-img__item"><img data-food='coffee' src="https://videohive.img.customer.envatousercontent.com/files/85e0d3d8-4e42-404b-849b-3580e12ede73/inline_image_preview.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=1414bf258c69a95ea64048e9044d4dfa"</li>
</ul>
</div>
<button class="nextButton buttons"></button>
<script>
images=Array.from(document.querySelectorAll('.menu-img__item img'));
images.unshift(images.pop());
preBut=document.querySelector('.prevButton');
nextBut=document.querySelector('.nextButton');
preBut.textContent=images[0].dataset.food;
nextBut.textContent=images[2].dataset.food;
currentImg=images[1];
currentImg.parentElement.style.display='block';
preBut.onclick=function(){
images.unshift(images.pop());
change();
}
nextBut.onclick=function(){
images.push(images.shift());
change();
}
function change(){
currentImg.parentElement.style.display='none';
currentImg=images[1];
currentImg.parentElement.style.display='block';
preBut.textContent=images[0].dataset.food;
nextBut.textContent=images[2].dataset.food;
}
</script>
</body>
</html><i>
</i>
``
``<i>
</i>images.unshift(images.pop());
preBut.textContent=images[0].dataset.food;<i>
</i>
``
``<i>
</i>> images.unshift(images.pop());
> preBut.textContent=images[0].dataset.food;<i>
</i>
`</CODE>
<HR>- - - - - - - - - - - - - - - - - - - - - - - -</HR>
Push() method<br/>
The push() method is used to add the new elements to the end of an array.<br/>
Example:
<CODE>
`<i>
</i>const arr = ["paper", "painter", "poet"];
arr.push("pan");
console.log(arr); // ["paper", "painter", "poet", "pan"]<i>
</i>
`</CODE>
Pop() method<br/>
The pop() method is used to remove the last element from an array, and returns the removed element.
<CODE>
`<i>
</i>> const arr = ["paper", "painter", "poet"];
> console.log(arr.pop()); // "poet"
> console.log(arr); // ["paper", "painter"]<i>
</i>
`</CODE>
Unshift() method<br/>
The unshift() method is used to add the new elements at the beginning of an array.
<CODE>
`<i>
</i>const arr = ["paper", "painter", "poet"];
arr.unshift("pocket");
console.log(arr); // ["pocket", "paper", "painter", "poet"]<i>
</i>
`</CODE>
Shift() method<br/>
The shift() method is used to remove the first element from an array, and returns the removed element.
<CODE>
`<i>
</i>const arr = ["paper", "painter", "poet"];
console.log(arr.shift()); // "paper"
console.log(arr); // ["painter", "poet"]<i>
</i>
`</CODE>
notice this in my code ...
<CODE>
`<i>
</i>> function change(){
> currentImg.parentElement.style.display='none';
> currentImg=images[1];
> currentImg.parentElement.style.display='block';
> preBut.textContent=images[0].dataset.food;
> nextBut.textContent=images[2].dataset.food;
> }<i>
>
</i>
``
``<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
font-family: sans-serif;
}
.buttons {
border: none;
background: none;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
background: pink;
padding: 10px 0;
width: 150px;
border-radius: 3px;
cursor: pointer;
}
.buttons:hover{color:red;}
.menu-img__list {
list-style-type: none;
padding: 0;
margin: 20px;
}
.menu-img__item {
width: 200px;
height: 200px;
border-radius: 10px;
display: none;
}
.menu-img__item img{
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
.menu-img__item.current-img {
display: block;
}
</style>
</head>
<body>
<button class="prevButton"></button>
<div class="menu-img">
<ul class="menu-img__list">
<li class="menu-img__item"><img data-food='buger' src="https://images.unsplash.com/photo-1571091655789-405eb7a3a3a8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJ1cmdlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"></li>
<li class="menu-img__item"><img data-food='pizza' src="https://www.simigeriapetru.ro/uploads/products/Pizza-Regina-Simigeria-PETRU.png"</li>
<li class="menu-img__item"><img data-food='chicken' src="https://www.seriouseats.com/thmb/hGmf-CklPEWYtGrsB1XIOfldngM=/1500x844/smart/filters:no_upscale()/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__2015__07__20210324-SouthernFriedChicken-Andrew-Janjigian-21-cea1fe39234844638018b15259cabdc2.jpg"</li>
<li class="menu-img__item"><img data-food='icecream' src="https://assets.tmecosys.com/image/upload/t_web767x639/img/recipe/ras/Assets/D032E1F7-FFC9-4483-9CC2-025DF7C1185E/Derivates/383D27F0-A27D-4632-8B32-DE1B658DBB64.jpg"</li>
<li class="menu-img__item"><img data-food='coffee' src="https://videohive.img.customer.envatousercontent.com/files/85e0d3d8-4e42-404b-849b-3580e12ede73/inline_image_preview.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=1414bf258c69a95ea64048e9044d4dfa"</li>
</ul>
</div>
<button class="nextButton"></button>
<script>
"use strict";
//var arr = ['burgers','pizza', 'chicken', 'icecreem', 'coffee'];
var images = Array.from(document.querySelectorAll('.menu-img__item img'));
const nextButton = document.querySelector('.nextButton')
const prevButton = document.querySelector('.prevButton')
var currentImg=images[0];
images.unshift(images.pop())
change();
//nextButton.textContent = arr[1];
//prevButton.textContent = arr[arr.length - 1];
//images[0].style.display='block';
nextButton.addEventListener('click', () => {
//shiftTextButtonUp();
showNextImg();
})
prevButton.addEventListener('click', () => {
//shiftTextButtonDown();
showPrevImg();
})
//function shiftTextButtonUp() {
// arr.push(arr.shift());
// nextButton.textContent = arr[1];
// prevButton.textContent = arr[arr.length - 1];
//}
//function shiftTextButtonDown() {
// arr.unshift(arr.pop());
// nextButton.textContent = arr[1];
// prevButton.textContent = arr[arr.length - 1];
//}
function showNextImg() {
//images[0].style.display='none';
images.push(images.shift());
//images[0].style.display='block';
change()
}
function showPrevImg() {
//images[0].style.display='none';
images.unshift(images.pop())
//images[0].style.display='block';
change()
}
function change(){
currentImg.parentElement.style.display='none';
currentImg=images[1];
currentImg.parentElement.style.display='block';
prevButton.textContent=images[0].dataset.food;
nextButton.textContent=images[2].dataset.food;
}
</script>
</body>
</html><i>
</i>
``
0.1.9 — BETA 5.6