6 Correct answers
Here is a basic of what I understood :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swap images</title>
</head>
<body>
<button id="myButton">Swipe</button>
<img id="myImg" src="" alt="Image">
<script>
// Here you create your array
const images = [
'a-one.jpg',
'a-two.jpg',
'a-three.jpg',
// add all images th
You already have a good reply as a solution but I'll throw this one into the mix just incase arrays like the following = const images = ['blah' , 'blah' , 'blah'] are a bit daunting to you.
You can still hard code the images into the html as you may usually do and then use css to hide them and javascript to create an array from them, just add your own images, instead of image_1.jpg, image_2.jpg etc:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Through Images</titlHow do we attach an event listener to the image object? and get the image carousel to scroll backward? The demo video is attached along with the coding.
By AmySykes
Add the below javascript directly before the closing </script> tag:
images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
All you have to do is google the subject, and you'll find tons of tutorials on the web. they're all pretty good, but it mostly depends on the entry level, the level covered, and the need to put it into practice at the same time, otherwise it remains mainly theoretical.
Regarding the basics, the link indicated by @BenPleysier can only be confirmed, MDN is a real source for beginners and experts alike, a must have!
As a complement, you can also start with :
...
Happy Monday!!
If this was written out the long way without arrow functions how would that look?
images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
By AmySykes
NOT a great deal of difference:
NO ARROW FUNCTION VERSION:
images.forEach(function(img) {
img.onclick = function() {
images.forEach(function(img) {
img.classList.remove('active')
})
if(count === 0) {
34
Replies
Hi Osgood, Happy Tuesday. I am struggling with understanding and learning the arrow function. I am using w3school.com to try and learn it. Do you have any other suggestions on learning resources?
By AmySykes
Arrow function is just a new es6 fancy way of writing a javascript function or looping through an array. I actually prefer the old syntax which you can still use.
images.forEach((img) => {
// do someting
})
Is the same as:
images.forEach(function(img) {
// do something
})
Similarly you can write a function like:
function swapImg() {
// do something
}
Or using the arrow function:
const swapImg = () => {
// do something
}
Personally l think the arrow function is not very distinctive within the code block and can get mixed up with declaring ordinary variables. I use both methods and often mix and match, both work.
I think arrow functions resolved some kind of function scoping issues where by the 'this' javascript keyword wasn't recognise using the old function() { } method, without jumping through hoops.
Happy Monday!!
If this was written out the long way without arrow functions how would that look?
images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
By AmySykes
NOT a great deal of difference:
NO ARROW FUNCTION VERSION:
images.forEach(function(img) {
img.onclick = function() {
images.forEach(function(img) {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
ARROW FUNCTION VERSION:
images.forEach((img) => {
img.onclick = () => {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
YOU COULD SHORTEN THE CODE MORE BY USING THE TERNARY OPERATOR (IN BOLD) AS A REPLACEMENT FOR the IF/ELSE BLOCK:
images.forEach(function(img) {
img.onclick = function() {
images.forEach(function(img) {
img.classList.remove('active')
})
count === 0 ? count = 0: count--;
images[count].classList.add('active');
}
})
AdChoices