Trying to replace className on clicking the 'next' or 'prev' button

Question

I'm trying to implement really basic javascript code to replace classNames 'onclick' but it's not working and driving me insane! I get the feeling i'm missing something really simple like an extra curly bracket or positioning of code but I can't identify it and it's driving me mad!

Here's the code,

var photoOne = document.getElementByClassName("photo1");
var photoTwo = document.getElementByClassName("photo2");
var photoThree = document.getElementByClassName("photo3");

function plusSlides() {
  photoOne.className.replace("photo1", "photo2");
  photoTwo.className.replace("photo2", "photo3");
  photoThree.className.replace("photo3", "photo1");
}

function backSlides() {
  photoOne.className.replace("photo1", "photo3");
  photoTwo.className.replace("photo2", "photo1");
  photoThree.className.replace("photo3", "photo2");
}

<head>
        <link rel="stylesheet" type="text/css" href="css/Homepage.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>

    <style>
    body {
    margin: 0;
    background: linear-gradient(90deg, yellow, orange);
    color: #a9040d;
    text-shadow: 1px 1px black;
    font-size: 1.5rem;
    font-family: Forte, "Times New Roman";
}

    nav {
    height: 4rem;
    overflow: hidden;
}

    nav a {
    float: left;
    background-color: transparent;
    text-decoration: none;
    padding: 0.5rem;
    color: #a9040d;
}

    nav a:hover {
    background: rgb(255, 204, 102);
    background: rgb(255, 204, 102 0.5);
    color: black;
}

    nav a.active {
    background: rgb(255, 255, 153);
    background: rgb(255, 255, 153 0.5);
}

    .logo {
    float: left;
    width: 15rem;
    height: auto;
    margin-top: -1rem;
}

    .intro {
    display: flex;
    flex-direction: row;
    height: 25rem;
    width: 100%;
    background: transparent;
    margin-top: 6rem;
    padding: 2rem;
}

    .intro-text {
    height: 20rem;
    width: 40rem;
    margin: 2.5rem 10rem 0rem 5rem;
}

    .photo1 {
    height: 20rem;
    width: 18rem;
    padding: 1rem 1rem 2rem 1rem;
    background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    text-align: center;
    z-index: 2;
}

    .img1 {
    width: 100%;
    height: auto;
}

    .photo-text {
    margin-top: 0rem;
    font-size: 2.5rem;
    font-family: "Brush Script MT";
    color: #202020;
    text-shadow: none;
}

    .photo2 {
    position: absolute;
    top: 10rem;
    right: 15rem;
    height: 18rem;
    width: 18rem;
    padding: 1rem 1rem 4rem 1rem;
    transform: rotate(14deg);
    background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    z-index: 1;
}

    .photo3 {
    position: absolute;
    top: 6rem;
    right: 10rem;
    height: 18rem;
    width: 18rem;
    padding: 1rem 1rem 4rem 1rem;
    transform: rotate(30deg);
    background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    z-index: 0;
}

    .prev {
    cursor: pointer;
    position: absolute;
    top: 20rem;
    left: 53%;
    width: auto;
    padding: 1rem;
    color: #a9040d;
    font-weight: bold;
    user-select: none;
}

    .next {
    cursor: pointer;
    position: absolute;
    right: 5%;
    top: 20rem;
    width: auto;
    padding: 1rem;
    color: #a9040d;
    font-weight: bold;
    user-select: none;
}

    .prev:hover {
  background-color: rgba(255, 165, 0, 0.8);
}

    .next:hover {
  background-color: rgba(255, 255, 0, 0.8);
}
    </style>`
        </head>
        <body>
            <header>
                <nav>
                <a class="active" href="#">Home</a>
                <a href="#">Our Story</a>
                <a href="#">Menu</a>
                <a href="#">Gallery</a>
                <a href="#">Where to find us</a>
            </nav>
                <img class="logo" src="Logo/Logo Transparent Retina.PNG">
            </header>
            <section class="intro">
                <div class="intro-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
                <a class="prev" onclick="plusSlides"><</a>
                <a class="next" onclick="backSlides">></a>
                <div class="photo1">
                    <img class="img1" src="Images/Staff.JPG" alt="Meet the Staff">
                    <h4 class="photo-text">Meet the Staff</h4>
            </div>
                <div class="photo2">
                    <img class="img1" src="Images/Food.JPG" alt="A dish prepared by Pat">
                    <h4 class="photo-text">Delicioso!</h4>
            </div>
                <div class="photo3">
                    <img class="img1" src="Images/Cake.JPG" alt="Having fun with clients and cake">
                    <h4 class="photo-text">Happy Birthday!</h4>
            </div>
        </section>
    </body>

You are using `getElementsByClassName()` which returns a live HTMLCollection, so as soon as you make the first replacement, `photo2` changes to reference what once was `photo1`. For the actual changing see: [https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript](https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript) — pilchard, Jul 18 '21 at 10:13
Does this answer your question? [How can I change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript) — pilchard, Jul 18 '21 at 10:19
Heya, I tried but it's still not working... I tried changing the id of all 3 photos to "photo" and used this from the jsfiddle example: function plusSlides() { if (photo.getAttribute('class') === 'photo1') { photo.setAttribute('class', 'photo2'); } else if { photo.getAttribute('class') === 'photo2') { photo.setAttribute('class', 'photo3'); } else { photo.getAttribute('class') === 'photo3') { photo.setAttribute('class', 'photo1'); }; }; Unfotunately that's not working — BCtech, Jul 21 '21 at 08:48
@pilchard I've also just tried giving them all separate ids "photo1", "photo2" and "photo3" and used this following code... function plusSlides() { if (photoOne.getAttribute('class') === 'photo1') { photoOne.setAttribute('class', 'photo2'); } else if { photoOne.getAttribute('class') === 'photo2') { photoOne.setAttribute('class', 'photo3'); } else { photoOne.getAttribute('class') { photoOne.setAttribute('class', 'photo1'); }; }; — BCtech, Jul 21 '21 at 09:13

Trying to replace className on clicking the 'next' or 'prev' button

0 Answers0