my code may have some problems but I am unable to find it as I am a very new developer.
I am learning javascript for 3 weeks but I had a problem that when I create any click function it first takes two clicks to work and after it works fine but again on reload it seems the same.
let slider = document.querySelector(".container");
let buttonPull = document.querySelector(".slide-btn")
buttonPull.addEventListener('click', () => {
if (slider.style.right == "-50px") {
slider.style.right = "0px";
buttonPull.style.transform = "rotateY(180deg)";
} else {
slider.style.right = "-50px"
buttonPull.style.transform = "rotateY(360deg)";
}
})* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(235, 235, 235);
}
.container {
z-index: 0;
position: fixed;
right: -50px;
top: 50%;
transform: translateY(-50%);
height: 250px;
width: 50px;
transition: all ease-in-out 0.25s;
}
.slide {
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
background-color: rgb(0, 102, 255);
display: flex;
}
.slide-btn {
display: flex;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
background-color: transparent;
border-style: none;
left: -25px;
font-weight: bolder;
font-size: larger;
top: 102px;
/* transform: rotateY(180deg); */
transform-origin: 50%;
z-index: 3;
height: 40px;
width: 20px;
cursor: pointer;
font-size: large;
color: rgb(0, 102, 255);
transition: step-start 0.3s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="slide"></div>
<button class="slide-btn">❮</button>
</div>
<script src="index.js"></script>
</body>
</html>
