JS Navbar klappt nicht, Hilfe?

Hallo,

Ich wollte mal nach Hilfe fragen, da mein Mobile Menu für die Navigation nicht klappt.

Ich kann das Menu öffnen wenn ich beim Event Listener den . durch ein , ersetze aber kann dann nichts anklicken da es sich direkt Schließt

const selectElement = (element) => document.querySelector(element);


selectElement('.nav-menu-icons').addEventListener('click', () => {
    selectElement('nav').classList.toggle('active');
});

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, JavaScript

13.11.2021, 07:32

Wenn du bei den letzten drei Zeilen deines vorliegenden Snippet irgendeinen der Punkte gegen ein Komma austauschen würdest, würdest du in jedem Fall für einen Zustand sorgen, der wohl kaum gewollt ist.

Bei Punkt 1 würdest du den Selektor brechen und somit für einen Laufzeitfehler sorgen.
Bei Punkt 2 würde die Bindung an das Browserfenster erfolgen. Das hieße, auf nahezu jeden Klick im Fenster würde der Handler reagieren. Anhand deiner Fehlerbeschreibung schätze ich, dass du diesen Punkt meinst.
Bei Änderung der folgenden Punkte wären erneut Laufzeitfehler das Resultat, da du aktiv Syntaxfehler in das Skript einbauen würdest.

Prüfe stattdessen, ob es überhaupt ein Element gibt, welches ein class-Attribut mit dem Wert nav-menu-icons besitzt (das Skript sucht nach dem ersten Element, auf welches diese Bedingung zutrifft). Dieses Element sollte der Schaltfläche entsprechen, mit der die Navigation geöffnet wird.

Achte zudem darauf, dass dein Skript erst ausgeführt wird, sobald die komplette Seite geladen (bzw. nachdem das Element mit besagter Klasse geladen) wurde. Um dies sicherzustellen, könntest du dein Skript kurz vor dem schließenden body-Bereich einbinden.

GamingBanane

Fragesteller

14.11.2021, 12:20

Danke für die Hilfe klappt jz

Ähnliche Fragen

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

Babel zu JS?

Hallo, ich habe im Netz eine Gallery gefunden, bei der man die Seiten wechseln kann. Jedoch ist der Code Babel.

Kann jemand ihn mir übersetzen?

const mySwiper = new Swiper(document.querySelector('.gallery'), {
  speed: 400,
  spaceBetween: 0,
  slidesPerView: 1,
  loop: true,
  navigation: {
    nextEl: '.gallery__nav-right',
    prevEl: '.gallery__nav-left'
  }
});

Devo

...zur Frage

Js observer Fehler?

Hallo liebe Community,

ich habe die programmierter Seite eines YouTubes (https://github.com/kevin-powell/navbar-change-on-scroll/tree/master/nav-change-finished)

eingesetzt und ausprobiert. Ziel war es dass sich die navigationsbar oben farblich ändert beim scrollen. Ich bekomme aber immer bei der letzen Zeile im JS Code einen Fehler. Bekommt ihr den auch und wie kann ich diesen beheben?

...zur Frage

addEventListener nacheinander für mehrere Elemente?

Hi,

ich versuche eine Art Notitzen-App zu coden. Es gibt also eine Seitenleiste in der die verschiedenen Notizen zu sehen sind und wenn diese angeklickt werden, soll der jeweilige Text in der großen textarea angezeigt werden. Bisher habe ich einen Zähler als Variable, der beim Hinzufügen einer neuen Notiz erhöht wird, so wird für jeden neuen Button eine eigene ID erstellt und ich speichere auch alle Notizen in einem Array und kann diese anzeigen lassen. Allerdings muss ich zu jedem Button ein onclick-Element mit der jeweiligen Notiz als Parameter hinzufügen, um sie anzeigen zu können. Das mache ich mit addEventListener. Aber wenn ich einfach document.getElementById(idNames[field]).addEventListener("click", function(){showNotice(toShow)}); verwende, funktioniert der Listener nur für die als letztes hinzugefügte Notitz, wenn ich idNames.forEach(element => document.getElementById(element).addEventListener("click", function(){showNotice(toShow);})) zeigen alle Button beim Klicken natürlich dieselbe Notiz an.

Weiß jemand, was in meinen Fall zu tun ist?

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

JavaScript, wofür steht in function(e) das e?

Hallo, ich lerne aktuell JS und habefolgendes Beispiel (siehe unten). Ich frage mich, wieso Lehrbücher in anonymen Funktionen solche Buchstaben als Parameter einbauen. Das e steht hier glaube ich für "Event", aber es ändert ja nichts an der Funktionsweise, wenn ich die Klammern leer stehen lasse, korrekt? Ich würde gerne verstehen, welche Vorteile sich für den Programmierer hier bieten. Am Anfang und auch jetzt fand ich es verwirrend, weil der Buchstabe ja nur symbolische Funktion zu haben scheint. Deswegen frage ich mich auch oft "Sollte ich das genauso handhaben oder eher weglassen". Dass es um ein Event geht, sieht man ja schon daran, dass Event-Listener und das Event change eingesetzt wird.



const checkbox = document.getElementById("remember");

checkbox.addEventListener(
    "change",                               
    function(e) {                           
        console.log(checkbox.value);        
        console.log(checkbox.checked);      
    }                 
);

...zur Frage

Was ist da schief (JS)?

Starte ich das Programm so beginnt es so wie ich es will. Irgendwann wird dann aber ein Fehler gezeigt

("main.js:27 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at ClickIt (main.js:27)

at clickvol2 (main.js:21)

at HTMLParagraphElement.<anonymous> (main.js:30))

und mehrere Flächen farbig markiert und man muss manchmal doppelt klicken. Wo liegt hier der Fehler?

JS:
"use strict";

let genNum = function() {

let gen = Math.random() * 9;

let num = Math.round(gen);

let numers = ["null", "eins", "zwei", "drei", "vier", "fünf", "sechs", "sieben", "acht", "neun"];

let final = (numers[num]);

if(final === "zehn") {

genNum()

}

return final;

};

let i = 0;

document.getElementById("Punkteanzahl").textContent = i;

let clickvol2 = function() {

if (document.querySelector("#eins", "#zwei", "#drei", "#vier", "#fünf", "#sechs", "#sieben", "#acht", "#neun").hasAttribute("class")) {

console.log(".")

} else {

ClickIt(genNum())

}};

let ClickIt = function(num) {

let hash = "#";

let ident = hash.concat(num);

document.querySelector(ident).setAttribute("class", "click");

document.querySelector(ident).addEventListener("click", function() {

document.querySelector(ident).removeAttribute("class");

clickvol2();

i++;

})

};

ClickIt(genNum());

console.log(document.getElementById("Punkteanzahl").textContent)

...zur Frage

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zur Frage

Einbindung von JS und CSS klappt nicht, könnte die Fehlerursache sein?

Hallo Leute, ich wollte gerade zum besseren Verständnis von getElementById() ein Beispiel nachbauen, dazu habe ich ein HTML-Dokument erstellt und die entsprechenden JavaScript- und CSS-Dateien eingebunden. Die CSS-Datei im Kopfbereich, die JS-Datei vor dem schließenden body-Tag. Am Ende soll ein roter Rahmen um eine Tabelle erzeugt werden.

Ich dachte erst, dass es am falsch eingegebenen Pfad liegen könnte, aber der ist soweit ich sehe auch richtig. Egal was ich tue, die HTML-Datei wird ausgegeben, aber ohne die JS- und CSS-Komponenten.

Hier der zugehörige JS-Code:

Hier der JS-Code:

function init() {
    // Selektion nach ID
    const mainElement = document.getElementById("main");
    mainElement.className = "border";
}

Hier der CSS-Code:

.border {
    border: thick solid red;
    border-radius: 25px;
    padding: 5px 25px 25px 25px;
}

...zur Frage

Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

<label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

<label for="workS" align="center"><strong> Abteilung W </strong></label><br>

<label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

//Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

result[element.name] = result[element.name] || [];

result[element.name].push(element);

return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

const limit = name.split(":")[name.split(":").length-1];

for(const el of elements) {

el.addEventListener("change", e => {

if (elements.filter(x => x.checked).length > limit) {

e.target.checked = false;

}

});

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

...zur Frage

Warum über JavaScript Events?

man kann ja in seinen html code onclick oder was auch immer für ein Event hinschreiben.

ich sehe trotzdem bei vielen Profis immer das hier

Html : 

<body>
<button id='MeinButton'>Senden</button>
</body>

js: 

document.querySelector('#MeinButton').addEventListener('click', MeineFunktion);

function MeineFunktion(){
event.preventDefault();
Alert(1);
}

einfacher wäre das hier

<body>
<button onclick='MeineFunktion();' id='MeinButton'>Senden</button>
</body>
function MeineFunktion(){
event.preventDefault();
Alert(1);
}

Und wieso muss man prevent default hinschreiben ?
Was genau macht der browser denn by default / standardmäßig das es sonst nicht funktioniert ?

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}

...zur Frage

Clickfunnel: Wieso funktioniert nur jedes zweite JavaScript-Element?

Ich habe in meinem ClickFunnel vier JavaScript-Elemente. Sie sind nicht direkt hintereinander, aber genau gleich gecodet.

Es handelt sich dabei um Dropdown-Elemente.

Mein Problem ist, dass das erste und dritte Element problemlos funktioniert, aber das zweite und vierte nicht. Da kommt kein Dropdown, wenn ich darauf klicke, obwohl alle Elemente gleich gecodet sind.

Woran könnte das liegen? Stehen die einander vielleicht im Weg? Ich kann es auch leider nicht anders machen, da zwischen den Elementen Bilder sind, die dazu gehören.

Hier mein Code (HTML / JS) von einem Element:

<div class="all4">
  <div class="obj">
    <button class="Produkte" style="margin-right: 1vw;">Kompressor</button>
    <div class="panel">
      <p>
        Tankinhalt: 2 × 50 Liter</br>
        Energiequelle: Honda 4Takt GX200 bleifrei</br>
        Antrieb: Riemen</br>
        Atom. Standgas: Ja</br>
        Start: Zugseil</br>
        Abgabeleistung: 490 Liter Minute bei 12 bar</br>
        Abgabeleistung: 550 Liter Minute bei 6 bar</br>
        Max. Druck: 12 bar</br>
        Abmessungen: 95cm × 51cm × 85cm (ohne Transportgriffe)</br>
        Gewicht: ca. 75 Kg</br>
        Lärm: ca. 95 Db</br>
        Garantie: 1 Jahr</br>
      </p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("Produkte");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
          panel.style.display = "none";
        }
        else {
          panel.style.display = "block";
        }
      });
    }
  </script>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen