با سلام و خسته نباشید به استاد مدائنی
این کد html:
مخصوص اعضای ویژه 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>* {
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, cornflowerblue, rgba(30, 144, 255, 0.2));
}
.phone_wrapper {
width: 350px;
height: 550px;
display: flex;
flex-direction: column;
background: white;
box-shadow: 0px 40px 40px -20px rgba(0, 0, 0, 0.25);
border-radius: 10px;
overflow: hidden;
}
.phone_wrapper header {
background: #bfd3f8;
width: 100%;
height: 200px;
border-radius: 10px 10px 0 0;
display: flex;
flex-direction: column;
}
.phone_wrapper header .speaker {
width: 100%;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
}
.phone_wrapper header .mic {
width: 15%;
height: 7px;
background: #92b4f2;
border-radius: 120px;
}
.phone_wrapper header nav {
width: 100%;
height: 60%;
display: flex;
position: relative;
}
.phone_wrapper header nav .tab {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.phone_wrapper header nav .indicator {
width: 50%;
height: 4px;
position: absolute;
bottom: 0;
background: #84abf1;
transition: 0.3s ease;
}
.phone_wrapper header .block {
margin-top: 10px;
width: 85%;
height: 45%;
border-radius: 4px;
background: #92b4f2;
cursor: pointer;
}
.phone_wrapper main {
flex: 1;
width: 200%;
height: 100%;
}
.phone_wrapper main .tab_reel {
width: 100%;
display: flex;
justify-content: space-between;
transition: 0.5s cubic-bezier(0.18, 1.14, 0.5, 1.18);
}
.phone_wrapper main .tab_reel .tab_panel1, .phone_wrapper main .tab_reel .tab_panel2 {
width: 50%;
padding: 10px;
}
.phone_wrapper main .card {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0.7rem;
border-radius: 6px;
background: white;
box-shadow: 0px 5px 15px rgba(100, 149, 237, 0.3);
}
.phone_wrapper main .card_large figure {
width: 100%;
height: 100px;
margin: 0;
background: #bfd3f8;
}
.phone_wrapper main .card_large .desc {
padding-left: 0px;
}
.phone_wrapper main .card_list {
display: flex;
align-items: center;
flex-direction: row;
}
.phone_wrapper main .card_list figure {
width: 40px;
height: 40px;
border-radius: 120px;
background: #bfd3f8;
margin: 0;
}
.phone_wrapper main .card_list .desc {
flex: 1;
}
.phone_wrapper main .desc {
width: 100%;
padding: 10px;
}
.phone_wrapper main .desc .block {
width: 40%;
height: 7px;
margin-bottom: 5px;
background: #92b4f2;
}
.phone_wrapper main .desc .block:nth-child(2) {
width: 35%;
margin-bottom: 0px;
}
.tab1.active ~ .indicator {
left: 0;
}
.tab2.active ~ .indicator {
left: 50%;
}
</style>
</head>
<body>
<div class="phone_wrapper">
<header>
<div class="speaker">
<div class=""></div>
</div>
<nav>
<div class="tab tab1 active " >
<div class="block"></div>
</div>
<div class="tab tab2 " >
<div class="block">
</div>
</div>
<div class="indicator"></div>
</nav>
</header>
<main>
<div class="tab_reel">
<div class="tab_panel1">
<div class="card card_large">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="card card_list">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="card card_list">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="card card_list">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
<div class="tab_panel2">
<div class="card card_list">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="card card_list">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="card card_list">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="card card_large">
<figure></figure>
<div class="desc">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
با این کد جاوا اسکریپت :
<script >
function slideLeft() {
document.getElementsByClassName("tab2").classList.remove("active");
document.getElementsByClassName("tab1").classList.add("active");
document.getElementsByClassName("tab_reel").style.transform = "translateX(0%)"
}
function slideRight() {
document.getElementsByClassName("tab1").classList.remove("active");
document.getElementsByClassName("tab2").classList.add("active");
document.getElementsByClassName("tab_reel").style.transform = "translateX(-50%)"
}
document.getElementsByClassName("tab1").addEventListener("click", slideLeft());
document.getElementsByClassName("tab2").addEventListener("click", slideRight());</script>اجرا میکنم جواب نمیده و ارور : Cannot read property 'remove' of undefined
at slideLeft
میده
مشکل از کجاست؟؟
این کد هارو هم از این لینک برداشتم (فقط خودم کد های جاوا اسکریپت رو یه مقدار عوض کردم):https://codepen.io/Gelsot/pen/eMOvOP
