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

Beitragsersteller

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

Beitragsersteller

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

Beitragsersteller

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.

Ähnliche Beiträge

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>

...zum Beitrag

PHP Upload funktioniert auf PC aber nicht aufm Handy?

Hallo,

dieser Code funktioniert nicht auf Handy aber auf dem PC, hat wer tipps?

Clientseite (JavaScript):

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script></head>
<body>
<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput" required>
    <button type="button" id="uploadButton">Hochladen</button>
</form>


<script>
    $(document).ready(function(){
        $('#uploadButton').on('click touchend', function(){
            var formData = new FormData($('#fileUploadForm')[0]);
            $.ajax({
                url: 'https://sub-upload.main.de/upload.php',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                    alert(response);
                },
                error: function(xhr, status, error){
                    alert(error + xhr.status);
                }
            });
        });
    });


</script>
</body>
</html>

Serverseite (upload.php):

<?php
$targetDirectory = '../uploads/';
header("Access-Control-Allow-Origin: https://sub.main.de");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
if (!file_exists($targetDirectory)) {
    mkdir($targetDirectory, 0777, true);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $targetFile = $targetDirectory . basename($_FILES['file']['name']);
    if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
        echo 'Die Datei wurde erfolgreich hochgeladen.';
    } else {
        echo 'Beim Hochladen der Datei ist ein Fehler aufgetreten.';
    }
} else {
    echo 'Keine Datei zum Hochladen gefunden.';
}
?>

...zum Beitrag

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zum Beitrag

Script funktioniert nur intern?

Mein Javascript-Code funktioniert einwandfrei, aber nur, wenn es in der Html-Datei eingebettet ist. Wenn ich es in die externe Js-Datei packe funktioniert es nicht, obwohl alles andere wie zB Dropdown-Menu und so weiter funktionieren. Weswegen könnte das sein?

...zum Beitrag

JavaScript Code für Webseite?

Hallo,

ich habe diesen Java Code geschrieben für eine Passwort gesicherte Seite. Jetzt möchte ich, dass wenn man auf das Feld für das Passwort geht, dass der ganze Text in dem Feld markiert wird.

Danke für die Hilfe.

...zum Beitrag

Css input type checkbox :checked?

Ich habe nen Hamburger Menü, welches nachdem man es anklickt nen Kreuz wird. Startet man die Website neu bleibt das Kreuz allerdings. Gibt es nen Code der das mit dem checkbox checked zurücksetzt, damit es wieder zum Hamburger Menü wird? Bzw. Wenn die Website zum aller ersten Mal aufgerufen wird passt auch alles nur beim reload nicht. Vllt gibt es da ne Funktion das alles was gespeichert wurde, also wie weit man runter gescrollt hat, das chebox ding, usw, gelöscht wird.

Kurz zur Erklärung. Sobald man das Hamburger Menü anklickt egal in welche Zustand kommt so ne sidebar von links nach recht rein. Den Code dafür habe ich hier mal nicht angebracht weil mit der alles funktioniert.

Der Html Code ist etwa so aufgebaut:

<input type=checkbox>
<label onclick="toggle()"

Hier der Css code:

Hier der Javascript code:

Danke schon mal im voraus.

...zum Beitrag

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!

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

Wie diese Funktion mit HTML-Code nachbauen?

Guten Abend zusammen ich programmiere eine kleine Seite und mir ist eine Funktion auf ebay aufgefallen; Wenn ihr auf dir Startseite geht dann gibt es etwas unten eine Art: Werbungsvorschläge. Beispielsweise steht da: Handys und Smartphones und direkt dadrunter befinden sich mehrere Bilder von verschiedenen Produkten. Wenn man darauf klickt wird man dementsprechend weitergeleitet. Rechts und links gibt es eine Pfeiltaste, wenn man sie drückt geht es nach links/rechts und es werden weitere Bilder/Produkte angezeigt. Es geht hierbei um die Funktion: Persönliche Empfehlung bei Ebay. Mir ist bereits bewusst, dass ich eine Scriptsprache brauche. Mir geht es jedoch hierbei nur um die Struktur und nicht um die Funktionen. Ich habe mir gedacht, dass ich diesen Code verwenden könnte: <button>←</button> -> Das ist ein Button mit der Pfeiltaste rechts und ich füge einige Bilder hinzu mit dem Code <img> .

Habt ihr vlt. einen Code mit dem es einfacher geht oder würdet ihr es anders machen. Ich bin dankbar für jede Hilfe und jeden Code :)

...zum Beitrag

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

...zum Beitrag

HTML/JS/CSS. Währungsrechner code von USD zu EUR?

Hallöchen 👋

Bin gaaanz neu in der Thematik programmieren, und zwar ich würde gerne bei meinem aktuell Projekt (Währungsrechner) noch die Funktion hinzufügen das man von USD zu Euro umrechnen kann.

Ich habe selbst probiert eine "Funktion" hinzuzufügen allerdings funktioniert diese wohl nicht. Wäre um Hilfe und eine kleine erklärung sehr sehr dankbar. (Benutze VS)

...zum Beitrag

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zum Beitrag

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zum Beitrag

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?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen