JavaScript Funktion funktioniert nicht?

Hallo,

Ich habe für meine Webseite eine Navigationsleiste gemacht, die sich einklappt, wenn man eine bestimmte Bildschirmbreite hat. Dann sind dort noch drei Punkte und wenn man klickt, öffnet sich eine Übersicht. Das hat alles super funktioniert.

Doch auf Seiten, wo ich schon JavaScript habe, funktioniert die Funktion plötzlich nicht mehr.

Namen sind alle nur einmal vergeben, Links stimmen und so weiter.

Und auf meiner Indexseite funktioniert das Icon nicht, obwohl es überall auf jeder anderen Seite funktioniert.

20.05.2024, 16:21

Das ist der Code für die Navigationsleiste

Das ist der HTML Code für die Navigationsleiste

20.05.2024, 16:31

z.B. bei dem Code funktioniert es nicht.

CoSci

20.05.2024, 16:22

Wie sieht der HTML Code aus? Wann wird die Funktion aufgerufen? Ist das der Vollstände JS Code?

masterbrain0931

Fragesteller

20.05.2024, 16:27

Wenn die Bildschirmbreite 700px ist. Mit einem @media im Style Dokument.

3 Antworten

Ademi33

20.05.2024, 16:29

Hey 👋

Javascript ist eine Sprache, die von oben nach unten geht.

Soll heißen, der Code wird von oben nach unten ausgeführt, und kommt es irgendwo zu einem Fehler, wird alles darunter nicht ausgeführt.

Drück mal auf der Seite, wenn es nicht funktioniert Shift+STRG+C

wähle links oben die Konsole aus.

Dort solltest du einen Fehler finden, den gilt es zu beheben!

Bild zum Beitrag

masterbrain0931

Fragesteller

20.05.2024, 16:33

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'compute-pressure'.

Das steht dann da.

Ademi33

20.05.2024, 18:58

@masterbrain0931

Da weiß ich auf Anhieb auch nicht weiter. Aber als kleinen Tipp.

Anstelle: "Passwort ist falsch"

Sagt man: "Username oder Passwort falsch".

Sonst weiß ein möglicher Angreifer, dass ein User mit dem Namen, den er ausprobiert hat existiert und brute forced diesen.

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

20.05.2024, 22:08

Hi masterbrain0931,

btw. du solltest anstatt className lieber classList.contains verwenden. Damit kannst du besser differenzieren wenn du einem Element mehrere Klassen vergibst.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

20.05.2024, 19:04

Du rufst die toogleTopnav-Funktion nirgendwo auf. Die Funktion myFunction wird wohl auch nicht definiert.

Noch ein paar weitere Anmerkungen:

Es gibt Elemente wie header oder nav, mit denen dein Markup besser strukturiert werden könnte, als nur mit div-Elementen
Für den Menübutton würde ich auch ein button-Element (type="button") verwenden, statt einen Link; via CSS kann er genauso gut nach Bedarf visuell angepasst werden
Dein Logolink hat keinen Linktext. Füge ihn entweder (z.B. in einem inneren span-Element) hinzu und blende ihn visuell aus oder setze ihn im alt-Attribut des Bildes
So lange du nur Text setzt, ist das textContent-Property passender als innerHTML

masterbrain0931

Fragesteller

20.05.2024, 19:58

Ja sorry mein Fehler. Das HTML Bild ist noch ein altes. Die Namen stimmen über ein, aber es funktioniert trotzdem nicht.

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zur Frage

Wie hast du richtig Programmieren gelernt?

Ich versuche gerade mit JavaScript eine kleine Webseite mit einem Audio Recorder zu programmieren.

Ich habe gestern gelernt, was eine API ist. Ich gehe in ChatGPT rein und geben ein: "Was bedeutet "getUserMedia()" und versuche die Bedeutung zu verstehen und tippe es selber ein, um die Funktion zu verstehen. Das ist derzeit meine Art zu lernen.

...zur Frage

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zur Frage

Exe gui erstellen?

Ich habe bisher noch nie etwas gemacht mit Programmen die nicht auf einer Webseite laufen und ich wollte es mal ausprobieren indem ich eine Art cookieklicker bastle, jetzt fehlt mir ein gui und ich habe keine Ahnung wie ich das mache, ich habe zwei Versionen des cookieklickers, eine die funktioniert aber übers cmd gesteuert wird und eine mit gutem gui die aber nicht klickt, hat jemand einen Rat für mich?

...zur Frage

JS console.log in HTML ausgeben?

Hallöchen!

Wir arbeiten gerade an einer simplen Webseite in der Schule. Dabei müssen wir sowohl HTML als auch Javascript verwenden. Nun habe ich am Ende der JS Funktion jedoch einen console.log command, welcher mir ein bestimmtes Element eines Array ausgibt. Dies ist dann auch das Endprodukt der Funktion. Wie kann ich diesen console.log command nun auf meiner Webseite ausgeben? Bzw. wie kann ich dieses Element auf meiner Webseite aus geben.

Der command:

console.log(Liste[XinOriginal)

Das Element:

"e ist der häufigste Buchstabe: " + e + " mal"

Danke für eure Hilfe!

...zur Frage

Kann man mit JavaScript den Text einer Website anzeigen lassen?

Hallo, ich würde mir gern Blog- und Zeitungsartikel speichern und mit JavaScript später anzeigen lassen.

Das heißt, ich würde gern erreichen, dass der Code dafür sorgt, dass ein beliebiger Link ausgelesen und der Inhalt der Seite des Links ausgespielt wird.

Ist das möglich und wenn ja mit welcher Funktion?

Vielen Dank im Voraus!

...zur Frage

HTML & CSS in .exe umwandeln?

Hallo,

ich habe eine ganz einfache Webseite mit HTML und CSS gebaut. Dort gibt es Buttons, die zu unterschiedlichen Webseiten führen. So eine Art Favoriten Liste wie in Browsern.

Diese Webseite möchte ich gerne in eine .exe umwandeln. Dann kann der Anwender über ein Desktop Icon dieses "Programm" öffnen. Wenn man dann auf einen Button klickt öffnet sich ganz normal eine externe Browser Webseite. Habe das schon mit .hta probiert, aber dann werden einige CSS Befehle nicht übernommen und die Buttons funktionieren nicht. Würde auch gerne eine Installation ausführen lassen, so dass man dann danach eine .exe. Datei hat.

Kenne mich nur mit HTML und CSS aus. Alles Andere kann ich nicht.

Danke :)

...zur Frage

HTML Webseite: wechselbarer Inhalt des Iframe?

Hallo zusammen,

ich habe beschäftige mich nun seit etwa einer Woche mit dem Erstellen von Webseiten und wollte mal den ersten Schritt wagen und eine Seite erstellen. Spontan bin ich auf die Idee gekommen eine Art Nachrichten Seite zu erstellen und treffe nun auf folgendes Problem: Ich möchte durch das Anklicken der einzelnen Punkte in der Navigationsleiste den Inhalt des Iframes wechseln lassen, weiß aber leider nicht wie ich das anstellen soll.

(Kann bisher nur mit HTML und CSS etwas anfangen, falls jemand einen Lösungsvorschlag mit JavaScript hat, wäre ich sehr dankbar für eine Erklärung!)

...zur Frage

Ist es möglich in php eine JavaScript Funktion auszulösen?

Ich muss eine JavaScript Funktion auslösen um auf Seite „2“ zu kommen die aber durch ein neu Ladens von php nach einen button clicks geschlossen wurde aber ich bekomme das irgendwie nicht hin obwohl ich allen regeln die ich im Internet lese befolge, weiß jemand was ich falsch mache?

...zur Frage

User in Webseite einbauen?

Wie kann ich User und Profile auf meine Webseite aufbauen? Also mit geht es mit HTML oder nur mit Javascript

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zur Frage

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zur Frage

Javascript nach Button Klick auf andere Webseite leiten?

Moin!

Ich hab folgende Frage: Wie kann ich es realisieren, dass, wenn ich auf den Success Button klicke, ich dann auf eine andere Seite geleitet werde? Der Link dahin ist auch ein Teil dynamischer PHP Code. Ihr werdet es sehen :)

Hier mein Code:

"use strict";!function(){const n=document.querySelector(".suspend-user"),t=(n&&(n.onclick=function(){Swal.fire({title:"Bist du sicher?",text:"Du kannst diesen Benutzer nicht wiederherstellen!",icon:"warning",showCancelButton:!0,confirmButtonText:"Fortsetzen",cancelButtonText:"Abbrechen",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary", text:"Abrechen"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Benutzer gelöscht!",text:"Der Benutzer wurde gelöscht.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Vorgang abgebrochen",text:"Der Benutzer wurde nicht gelöscht.",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}),document.querySelectorAll(".cancel-subscription"));t&&t.forEach(n=>{n.onclick=function(){Swal.fire({text:"Are you sure you would like to cancel your subscription?",icon:"warning",showCancelButton:!0,confirmButtonText:"Yes",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Unsubscribed!",text:"Your subscription cancelled successfully.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Cancelled",text:"Unsubscription Cancelled!!",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}})}();

Und ich möchte gern auf folgende Seite weitergeleitet werden:

index.php?page=deleteUser&&delete_id=<?=$user_data['user_id']?>

Könntet ihr mir hier behilflich sein? Wenn ich auf den Button "Fortsetzen" klicke erscheint noch eine Bestätigungsnachricht, wenn man dann auf "OK" klickt, soll der Redirect ausgeführt werden.

Danke euch im Vorraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen