Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 15.2021 — #Make these changes to get rid of error ...
@daveyerwinJul 16.2021 — #@RaulRogojan#1634235 said ...
can you please explain what those lines of code do?
the array index's don't change
I reorder the array values with the array functions(push,pop,shift and unshift)
- - - - - - - - - - - - -
https://www.andistips.com/how-to-access-html5-data-attributes/
https://vegibit.com/html5-data-attributes/#:~:text=%20HTML5%20Data%20Attributes%20%201%20Data%20Attributes,on%20the%20page.%20In%20addition%2C%20you...%20More%20
in your code text changes is by adding the text from an array into the innerHTML of the button.
so of course you needed an array in your JavaScript so if you needed to add ,remove or change the order
of the images you would need to alter the JavaScript array.
In my code the button texts are in the HTML so changes need only be made in html
the JavaScript will not need to be changed@daveyerwinJul 18.2021 — #
the main difference is your JS requires "prior knowledge" of the HTML , in your code you have to maintain an array
in your JavaScript with the button text in the same order as the
list items (if the li s are rearranged then the array must be rearranged)
Cannot read property ‘classList’ of null and adding animation to innerHTML
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:
Sign in
to post a comment6 Comments(s) ↴
0
@daveyerwinJul 15.2021 — #Make these changes to get rid of error ...``<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>``0
@daveyerwinJul 16.2021 — #can you please explain what those lines of code do?
``<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>``the array index's don't change
I reorder the array values with the array functions(push,pop,shift and unshift)
- - - - - - - - - - - - -
in your code text changes is by adding the text from an array into the innerHTML of the button.
so of course you needed an array in your JavaScript so if you needed to add ,remove or change the order
of the images you would need to alter the JavaScript array.
In my code the button texts are in the HTML so changes need only be made in html
the JavaScript will not need to be changed
0
@daveyerwinJul 18.2021 — #``<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>``the main difference is your JS requires "prior knowledge" of the HTML , in your code you have to maintain an array
in your JavaScript with the button text in the same order as the
list items (if the li s are rearranged then the array must be rearranged)