Issue

This Content is from Stack Overflow. Question asked by Broteen Das

I have the following code snippet.

<!DOCTYPE html>
<html style="background-color: #000000; color: #fff;">
<head>
<title>Page Title</title>
<script src="https://cdn.tailwindcss.com"></script>

</head>
<body>


<div class="container px-5 py-24 mx-auto flex-row">

    <h1 class="content-heading" id="aboutme">
        achievements(
    </h1>

    <div class="flex flex-wrap w-full achievements-holder">

        <div class="funky-h3 achievements-arrow" id=" UP" onclick="scrollAcievements('U');">></div>
        <div class="funky-h3 achievements-arrow" id="DOWN" onclick="scrollAcievements('D');" style="bottom: 0%;"><</div>
        
        <section class="flex-row achievement" id="JEE">
            
            <div>
                <img src="https://img.collegepravesh.com/2015/09/NTA-Logo.png" style="aspect-ratio: 1; width: 100px;" alt="">
                <h1 class="heading">
                    HEEAD
                </h1>
            </div>
            <h1 class="funky-h3 data">
                DATA GAIN
            </h1>
        </section>

        <section class="flex-row achievement" id="WBJEE">
            
            <div>
                <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/46/West_Bengal_Joint_Entrance_Examinations_Board_Logo.svg/220px-West_Bengal_Joint_Entrance_Examinations_Board_Logo.svg.png" style="aspect-ratio: 1; width: 100px;" alt="">
                <h1 class="heading">
                    HEAD
                </h1>
            </div>
            <h1 class="funky-h3 data">
                STFF 
            </h1>
        </section>

        <section class="flex-row achievement" id="WBJEE">
            
            <div>
                <img src="https://img.collegepravesh.com/2015/09/NTA-Logo.png" style="aspect-ratio: 1; width: 100px;" alt="">
                <h1 class="heading">
                    CUET
                </h1>
            </div>
            <h1 class="funky-h3 data">
                centile
            </h1>
        </section>

        
        
    </div>
    <h1 class="content-heading" id="aboutme">
        );
    </h1>

    <style>
        .achievement{
            height: 400px;
            transition: 0.2s;
        }
        .achievements-holder{
            /* transform: translateX(); */
            transition: 0.2s;
            background-color: transparent; 
            position: relative; 
            height: 400px; 
            padding: 50px 10px; 
            margin: 5px;
            overflow-y: hidden;
        }
        .achievements-holder section div{
            display: flex; flex-direction: column; flex-grow: 1;
        }
        .achievements-holder section{
            display: flex;  
            width: 100%;
            /* background-color: #16a34a; */
            height: 300px;
        }

        .achievements-holder .heading{
            background-color: transparent;  font-size: 2.5rem; flex-grow: 1;
        }
        .achievements-holder .data{
            background-color: transparent; text-align: right; margin: 5px;
        }

        .achievements-arrow{
            position: absolute;
            left: 50%;
            transform: rotate(-90deg);
        }
        
        .funky-h3:hover{
            color: #1adb61;    
        }
        .funky-h3{
            font-size: 1.5rem;
            font-family: 'Press Start 2P', cursive;
            margin: 15px 0;
            color: #17c758;
            user-select: none;
        }

    </style>
    <script>
        let achievements = document.getElementsByClassName('achievement');
        
        let viewEl = 1;
        let posY = 0;
        
        function scrollAcievements(direction){
            console.log('ENT');
            if (direction == 'U') {
                viewEl++;
                posY -= 300;
            }
            else if (direction == 'D') {
                viewEl--;
                posY += 300;
            }

            if (viewEl < 1) {
                viewEl = 1;
                posY = 0;
                return null;
            }
            else if (viewEl > Array.from(achievements).length) {
                viewEl = Array.from(achievements).length;
                posY = Array.from(achievements).length*300 - 300;
                return null;
            }
            
            console.log(viewEl);
            console.log(posY);
            (Array.from(achievements)).forEach(element => {
                element.style.transform = `translateY(${posY}px)`;
            });
            console.log('EX');
        }

    </script>
</div>
</body>
</html>

The problem is that, whenever I click on the up and down arrows, they work once and they somehow become completely static. Not only does the function not run again, but even the :hover effect goes away (the css changes the arrow color on hovering). Why is this happening and how do I fix this?

Solution

The problem was that the lower divs were getting painted over the arrows. This was fixed by bringing the z-index of the arrows on top.

Credit: Nick

This Question was asked in StackOverflow by Broteen Das and Answered by Broteen Das It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.