On click only works once
for my responsive (mobile) hamburger-menu, i wanted to show the menu, when a class is pressed. But it only works once ('click' is only locked once in the console, so it doesn't register the clicks after it was pressed one time). NOTE: I use PHP for the side and for the menu html.
What is my mistake? Thank you for your advice!
var btn = document.querySelector(".toggle-btn");
var navbar = document.querySelector(".menue");
btn.addEventListener('click', () => {
console.log('click');
navbar.classList.toggle("active");
})<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="nav-bar">
<nav>
<div class="logo">
<a href="../../index.php"><img src="../png/lg_nord_logo_navbar.png" alt=""></a>
</div>
<a href="#" class="toggle-btn">
<span class="bar">Bar 1</span>
<span class="bar">Bar 2</span>
<span class="bar">Bar 3</span>
</a>
<div class="menue">
<ul>
<li><a href="#">Disziplinen</a>
<ul>
<li><a href="../disziplinen/30_m_startblock.php">30 meter startblock</a></li>
<li><a href="../disziplinen/30_m_fliegend.php">30 meter fliegend</a></li>
<li><a href="../disziplinen/60m.php">60 meter</a></li>
<li><a href="../disziplinen/10er_hopserlauf.php">10er Hopserlauf</a></li>
<li><a href="../disziplinen/Klappmesser.php">Klappmesser</a></li>
<li><a href="../disziplinen/Klimmzuege.php">Klimmzüge</a></li>
<li><a href="../disziplinen/liegestuetze.php">Liegestütze</a></li>
<li><a href="../disziplinen/standweitsprung.php">Standweitsprung</a></li>
</ul>
</li>
<li><a href="#">Daten hinzufügen</a>
<ul>
<li><a href="../addData/30_m_startblock.php">30 meter startblock</a></li>
<li><a href="../addData/30_m_fliegend.php">30 meter fliegend</a></li>
<li><a href="../addData/60m.php">60 meter</a></li>
<li><a href="../addData/10er_hopserlauf.php">10er Hopserlauf</a></li>
<li><a href="../addData/Klappmesser.php">Klappmesser</a></li>
<li><a href="../addData/Klimmzuege.php">Klimmzüge</a></li>
<li><a href="../addData/liegestuetze.php">Liegestütze</a></li>
<li><a href="../addData/standweitsprung.php">Standweitsprung</a></li>
</ul>
</li>
<li><a href="#"><i class="material-icons">support_agent</i>Athleten (beta)</a>
<ul>
<li><a href="../athlet_search/index.php?name=tom">Tom-Luca</a></li>
<li><a href="../athlet_search/index.php?name=marc">Marc </a></li>
<li><a href="../athlet_search/index.php?name=leo">Leo </a></li>
<li><a href="../athlet_search/index.php?name=lukas">Lukas</a></li>
<li><a href="../athlet_search/index.php?name=vincent">Vincent</a></li>
<li><a href="../athlet_search/index.php?name=damien">Damien</a></li>
<li><a href="../athlet_search/index.php?name=karsten">Karsten</a></li>
</ul>
</li>
<li><a href="../../settings/"><i class="material-icons">admin_panel_settings</i> Einstellungen</a></li>
<li><a class="state" href="login.php">Login</a></li>
<li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</ul>
</div>
</nav>
</div>
```My PHP code:
<?php
session_start();
if(!isset($_SESSION["username"])){
header("Location: ../index.php");
exit;
}
require("../rank_manager.php");
if(getRank($_SESSION["username"]) == USER){
header("Location: ../errors/error.php?code=101&name=not_enought_permissions&type=website");
exit;
}
if(isBanned($_SESSION["username"])){
header("Location: logout.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#34495e">
<title>Daten hinzufügen</title>
<link rel="stylesheet" href="./css/style.theme.css">
<script src="https://kit.fontawesome.com/c54c107c6a.js" crossorigin="anonymous"></script>
<script type="text/javascript "src="../../theme/themeManager.js" defer></script>
<script type="text/javascript "src="navbar_menu.js" defer></script>
</head>
<body class="light">
<div class="themeChange">
<button id="changeTheme"><i class="material-icons">dark_mode</i></button>
</div>
<div class="preloader">
<img src="../png/preloader-final.gif" alt="">
</div>
<?php
include("../navbar/navbar.html");
?>
<div class="data">
<form action="standweitsprung.php" method="post">
<h1>Daten eintragen</h1>
<br><br>
<input type="text" name="period" placeholder="Zeitraum">
<input name="tom" id="tom_input" type="number" step="0.01" placeholder="Tom">
<input name="marc" id="marc_input" type="number" step="0.01" placeholder="Marc">
<input name="leo" id="leo_input" type="number" step="0.01" placeholder="Leo">
<input name="lukas" id="lukas_input" type="number" step="0.01" placeholder="Lukas">
<input name="vincent" id="vincent_input" type="number" step="0.01" placeholder="Vincent">
<input name="damien" id="damien_input" type="number" step="0.01" placeholder="Damien">
<input name="karsten" id="karsten_input" type="number" step="0.01" placeholder="Karsten">
<button type="submit" name="submit">Daten absenden</button>
</form>
</div>
<?php
if(isset($_POST["submit"])){
$period = $_POST["period"];
$tom = $_POST["tom"];
$marc = $_POST["marc"];
$leo = $_POST["leo"];
$lukas = $_POST["lukas"];
$vincent = $_POST["vincent"];
$damien = $_POST["damien"];
$karsten = $_POST["karsten"];
if($tom == "") {
$tom = null;
}
if($lukas == "") {
$lukas = null;
}
if($leo == "") {
$leo = null;
}
if($marc == "") {
$marc = null;
}
if($vincent == "") {
$vincent = null;
}
if($damien == "") {
$damien = null;
}
if($karsten == "") {
$karsten = null;
}
$content = array(
"period" => $period,
"tom" => $tom,
"marc" => $marc,
"leo" => $leo,
"lukas" => $lukas,
"vincent" => $vincent,
"damien" => $damien,
"karsten" => $karsten,
);
if(filesize("../data/standweitsprung.json") == 0) {
$first_record = array($content);
$data_to_save = $first_record;
} else {
$old_records = json_decode(file_get_contents("../data/standweitsprung.json"));
array_push($old_records, $content);
$data_to_save = $old_records;
}
if(!(file_put_contents("../data/standweitsprung.json", json_encode($data_to_save, JSON_PRETTY_PRINT), LOCK_EX))) {
$error = "Error storing content";
} else {
$success = "Daten gespeichert";
}
}
?>
<div class="turn-device">
<img src="../png/rotate-device-light.png" alt="">
</div>
<script src="../javascript/preloader.js"></script>
</body>
</html>
Solution 1:
I've fixed it. The problem was that the mobile nav-bar had rendered a transparent object on top of the button, so I never clicked the button actually. The solution was to give the button a higher z-index.