const go = document.querySelector(".let-go-plan");
const fall = document.querySelector(".fall-over-plan");
const section = document.querySelector("section");
const choose = document.querySelector(".choose");
const arrow = document.querySelector(".icon-left-big");
const btn2 = document.querySelector(".let-go");
const btn3 = document.querySelector(".fall-over");
btn2.addEventListener("click", function(){
go.style.display = "block";
section.style.display = "none";
choose.style.display = "none";
});
btn3.addEventListener("click", function(){
fall.style.display = "block";
section.style.display = "none";
choose.style.display = "none";
});
arrow.addEventListener("click", function(){
if(fall.style.display = "block") fall.style.display = "none";
if(go.style.display = "block") go.style.display = "none";
choose.style.display = "block";
section.style.display = "flex";
});
<body>
<header>
<h2 class="choose">Choose your training day:</h2>
</header>
<section>
<div class="crushed">Do not be crushed</div>
<div class="let-go">Do not let go</div>
<div class="fall-over">Do not fall over</div>
</section>
<div class="let-go-plan">
<h2>Pull Day</h2>
<ol>
<li>Pull Up: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Skier: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Dumbbell Row: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Standing Barbell Curl: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Seated Hammer Curl: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Hercules: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
</ol>
<i class="icon-left-big"></i>
</div>
<div class="fall-over-plan">
<h2>Leg Day</h2>
<ol>
<li>Squat: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Bulgarian Squat: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Hamstring: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Plank: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Cable crunch: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
<li>Russian Twist: <div class="box"><form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form>
<form>
<input class="number-input" name="series" type="number" placeholder="series"> /
<input class="number-input" name="reps" type="number" placeholder=" reps">
</form></div></li>
</ol>
<i class="icon-left-big"></i>
</div>
<footer>
<a id="videolink" href="#videostory"><i class="icon-television" aria-hidden="true"></i></a>
<div class="popup" id="videostory">
<iframe width="853" height="480" src="https://www.youtube.com/embed/ttGKp7BiX8E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<a href="#" class="close">X</a>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>
Mam 2 problemy:
1. Nie wiem jak poradzić sobie z tym błędem: Failed to load resource: net::ERR_NETWORK_IO_SUSPENDED
2. Nie wiem dlaczego nie działa w niektórych przypadkach nie działa interakcja ze strzałką.
Wiem, że html mogłem napisać prościej, tak aby zawierał mniej kodu, ale już tak zostało.
Proszę o pomoc