Attempting to switch between classes with the click of a button

Question

Attempting to switch between classes with the click of a button

I am attempting to create a basic animation that involves changing an image from A to B to C when a button is clicked. However, I am encountering an issue with the error message

Cannot read properties of undefined (reading 'classList')

. I am puzzled as I have successfully used a similar structure for a carousel in the past without any problems.

My goal is to switch the elements from "seed" to Bootstrap's ".d-none".

var javaButton = document.getElementById("button-trigger");

const track = document.querySelector(".plant-wrapper");
const slides = Array.from(track.children);
const targetIndex = slides.findIndex;
const hidden = document.querySelector(".d-none");
const seeds = document.querySelector(".seed");

javaButton.addEventListener("click", moveToSlide);

function moveToSlide(slides, seeds, hidden, targetIndex) {
if (targetIndex === 0) {
  seeds.classList.add("is-hidden");
  hidden.classList.remove("is-hidden");
} else if (targetIndex === slides.length - 1) {
  seeds.classList.remove("is-hidden");
  hidden.classList.add("is-hidden");
} else {
  seeds.classList.remove("is-hidden");
  hidden.classList.remove("is-hidden");
}
};

<button type="button" id="button-trigger">Explore!</button>
<div class="plant-wrapper">
  <img src="images/seed.png" class="seed mx-auto d-block" id="seed1">
  <img src="images/sprout.png" class="mx-auto d-block d-none" id="seed2">
  <img src="images/stem.png" class="mx-auto d-block d-none" id="seed3">
  <img src="images/pot.png" class="pot mx-auto d-block">
</div>

javascript bootstrap-5

Answer 1

Answer №1

An issue arises when you fail to provide arguments to the moveToSlide function

This can be resolved by removing arguments from the moveToSlide function (as it will read variables declared above)

function moveToSlide() {
  // Code...
}

Alternatively, you can pass values to the function (which is the recommended option)

javaButton.addEventListener("click", () => moveToSlide(slides, seeds, hidden, targetIndex))

Answer 2

An issue arises when you fail to provide arguments to the moveToSlide function

This can be resolved by removing arguments from the moveToSlide function (as it will read variables declared above)

function moveToSlide() {
  // Code...
}

Alternatively, you can pass values to the function (which is the recommended option)

javaButton.addEventListener("click", () => moveToSlide(slides, seeds, hidden, targetIndex))

Answer 3

Answer №2

If you're looking to create a slider, there are alternative methods that can be used.

Check out a demo from w3schools on how to create a slider: https://www.w3schools.com/howto/howto_js_slideshow.asp

Here's a different approach to building a slider:

index.html

<button type="button" id="button-trigger" onclick="changeImg()">Click here!</button>

<div class="plant-wrapper" id="plant-wrapper">
</div>

index.js

var index = 0;

const imageArray = [
    "images/1.png",
    "images/2.png",
    "images/3.png",
    "images/4.png"
];

function changeImg(){
    (index == imageArray.length - 1 ? index = 0 : index++);
    showImage();
}

function showImage(){
    document.getElementById("plant-wrapper").innerHTML = '<img src="' + imageArray[index] + '" class="mx-auto" />';
}   

window.onload = function() {
    showImage()
}

Answer 4

If you're looking to create a slider, there are alternative methods that can be used.

Check out a demo from w3schools on how to create a slider: https://www.w3schools.com/howto/howto_js_slideshow.asp

Here's a different approach to building a slider:

index.html

<button type="button" id="button-trigger" onclick="changeImg()">Click here!</button>

<div class="plant-wrapper" id="plant-wrapper">
</div>

index.js

var index = 0;

const imageArray = [
    "images/1.png",
    "images/2.png",
    "images/3.png",
    "images/4.png"
];

function changeImg(){
    (index == imageArray.length - 1 ? index = 0 : index++);
    showImage();
}

function showImage(){
    document.getElementById("plant-wrapper").innerHTML = '<img src="' + imageArray[index] + '" class="mx-auto" />';
}   

window.onload = function() {
    showImage()
}

Attempting to switch between classes with the click of a button

Answer №1

Answer №2

Similar questions

Issues arise when attempting to transfer strings through ajax to a Node.js server that is utilizing express.js

Obtaining various object values from a data set

Tips on extracting data from an API using jQuery

Having trouble with the close button functionality on a Toast in Bootstrap?

What is the best way to name a force-directed Graph using d3?

Alternating row colors using CSS zebra striping after parsing XML with jQuery

Adjust the color of a selected edge in Three.js

SequelizeDatabaseError: The operation could not be executed as there is no operator that allows for

Problem-solving modal disappearance

Angular 4 is displaying an error message indicating that the expression has been modified after being initially verified

Tips for implementing WebSockets with Play Framework

Center the span in CSS by setting its position to absolute

Express route encountered an error with an undefined value

Pop-up windows, the modern day digital version of fortune cookies

Exporting two functions in JavaScript

Transferring a zipped file between a Node.js server and a Node.js client

Building a remote shell using Node.js with the ability to interpret control sequences

Unable to retrieve the complete count of invitations made by a user

Error encountered when attempting to include a foreign key

Personalized Element Commands and features