Funktion JavaScript funktioniert nicht.?

Ganz grob erklärt soll meine Website immer Abwechselnd ein Video und dann eine Frage anzeigen. In meiner Funktion für das Video soll beim Klicken auf den Video-Link die nächste Frage(-Funktion) aufgerufen werden. Das hat auch bei den ersten 2 Fragen geklappt. Aber bei der 3. Frage springt er wieder auf die vorherige Frage2 (statt wie gewünscht Frage3) zurück.
Weiß jemand woran das liegen könnte?

Ich wäre super dankbar für eine Antwort.
Danke und Liebe Grüße! ☺️

Bild zum Beitrag

06.01.2022, 11:28

// 2. FRAGE
function frage2(){ // nach richtiger antwort aufgerufen
   delete richtig;
   buttonvoll(); //buttons sichtbar machen
   document.getElementById("frage1").innerHTML = 'Was haben wir im Urlaub gemacht?'; // 2. frage
   document.getElementById("text").innerHTML = 'super gemacht! </br> Errinnerst du dich noch an unseren 1. Urlaub?';
   document.getElementById("button1").innerHTML = 'Schneemann'; //antworten in buttons schreiben
   document.getElementById("button2").innerHTML = 'Schneefrau';
   document.getElementById("button3").innerHTML = 'Schneeengel';
   document.getElementById("button4").innerHTML = 'Schneeballschlacht';
   document.getElementById("button3").id = 'test2'; // kurzes umbennenen der richtigen antwort
   var richtig2 = document.getElementById('test2'); //klick-event bei richtiger Antwort
   richtig2.addEventListener('click', weg2);
   function weg2(){
      document.getElementById("test2").id = 'button3'; // umweg um zurückspringen zu verhindern
      video4();
   }
}
function video4(){
      document.getElementById("video").style.fontSize = "55pt"; //Link sichtbar machen
   buttonleer(); // button verbergen
   document.getElementById("frage1").innerHTML = ''; // Frage leer
   document.getElementById("video").innerHTML = 'weiter gehts';
   document.getElementById("video").href = 'https://youtu .be/bE3N64nofss'; //Winterurlaub
   var weiter4 = document.getElementById('video'); //klick-event bei drücken auf link
   weiter4.addEventListener('click', frage3);   
}
// 3. FRAGE
function frage3(){   // bei richtiger antwort aufgerufen
...

thomaszZz, Software Engineer bei gutefrage

06.01.2022, 11:11

Kannst du den Code lesbar in die Frage einfügen statt ein Foto vom Bildschirm zu machen?

0Ahnunq

Fragesteller

06.01.2022, 11:25

Ok, danke. Ich versuche es. ;)

Aber das gesamte Program ist sehr lang und unübersichtlich. Ich würde den entscheidenden Teil hochladen.

1 Antwort

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

06.01.2022, 13:35

Dein Codeausschnitt reicht nicht aus, um eine definitive Antwort zu geben. Eine Vermutung vom mir ist aber, dass du auf dein Element mit der ID test2 einfach immer nur einen neuen click-Eventlistener drauf packst. Damit wird aber der vorherige Listener nicht entfernt und der wird auch zuerst aufgerufen.

Du solltest nach dem Aufruf also immer den vorherigen Eventlistener entfernen:

https://www.w3schools.com/jsref/met_element_removeeventlistener.asp

Alternativ kannst du deine Programmlogik auch so abändern, dass du mit einem click-Event auskommst und da drin jeweils entscheidest, mit welchem Video es weitergeht.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

0Ahnunq

Fragesteller

06.01.2022, 17:36

Hey, erstmal vielen Dank für die Antwort. :)

Ich hab die ID eigentlich extra jedes mal mit einem neuen Idex versehen (test1, test2, ...). Und bevor ich die Videos eingefügt habe hat auch alles funktioniert.

Ich sehe auch keinen Unterschied zu den ersten zwei Videos und Fragen wo alles funktioniert. :(

Babelfish

06.01.2022, 18:46

@0Ahnunq

Ohne den ganzen Code kann man dazu nichts weiter sagen. Auf jeden Fall ist das nicht wirklich gut durchdacht programmiert. Die ID eines Elements solltest du zum Beispiel nie ändern und dazu gibt es auch keine Notwendigkeit bei dir.

Um den Fehler zu finden, solltest du zum Debuggen am besten mal ein paar console.log("ich bin hier") einbauen um zu sehen, welcher Eventhandler und welche Funktion an welchem Punkt aufgerufen wird. Das hilft am einfachsten solche Fehler einzugrenzen.

0Ahnunq

Fragesteller

07.01.2022, 21:01

@Babelfish

Ich bin leider totaler Anfänger und hab das irgendwie zusammengebastelt. 😅🙈 Danke dann probiere ich da nochmal rum.

Hallo,

ich bin grade etwas verwirrt. Wie kann ich mithilfe einer Variable feststellen, wie oft eine Funktion aufgerufen wurde. Weil bei jedem Funktionsaufruf wird meine Variable wieder auf 0 gesetzt. Irgendwelche Ideen?

...zur Frage

wie kann ich in javaScript eine Funktion mit einem Tastendruck aufrufen?

Hi Leute,

ich programmiere einen Taschenrechner und möchte dafür eine funktion über die Tastatur aufrufen können. Also wenn ich zum Beispiel eine 2 drück, soll die function calculate(2); aufgerufen weden. Im internet habe ich viele Ergebnisse gefunden, die mich verwirrt haben.

Vielen Dank im Voraus😉

...zur Frage

Mit Javascript zu einem Teil im HTML Dokument springen?

Hallo !

Ich bin gerade dabei eines meiner ersten Projekte mit JavaScript/CSS/HTML umzusetzen.

Ich bin gerade dabei eine Suchfunktion einzubauen.

Ich habe eine Layout von Material Design Lite verwendet. Ich habe es so umgesetzt, dass das ganze im einem HTML Formular steht und beim absenden (drücken der ENTER Taste) eine JavaScript Funktion ausgeführt wird. Bei dieser hole ich mir mithilfe von document.getElementById().value den Wert der eingegeben wurde und sage, dass dieser Wert auf eine Variable übertragen wird. Ich frage per If und else ab was eingeben wurde (Bsp. 1) und will dann das zum einem bestimmten Teil im HTML Text gesprungen wird.

Mein Problem :

Ich muss es irgendwie umsetzen, dass mit JavaScript Code zu einem bestimmten Teil (im HTML Text ) gesprungen wird OHNE das man auf einen Link klicken muss.

Weiß jemand von euch hier, wie das möglich ist ?

(Danke für deine Zeit, beim Lesen und Danke für jede Antwort)

Hier der Code meiner JavaScript Funktion

Hier der Code des HTML Formulars

...zur Frage

Javascript Cooldown für discord Bot?

Liebe gutefrage-Community,

ich würde gerne für ein gambling system einen cooldown anwenden, sprich die User können den Command erst nach einer bestimmten Zeit wieder einsetzen.

Grob gesagt soll die Funktion den Cooldown für einen User speichern und immer wieder ausgeben können (also auch verbleibende Zeit etc.)

...zur Frage

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zur Frage

Addition in Javascript funktioniert nicht?

Ich versuche es zu erreichen, dass wenn ein HTML-Button gedrückt wird eine Javascript-Funktion aufgerufen wird. Diese soll die Variable Anzahl dann um 1 erhöhen. Beim 1. Mal funktioniert das auch und der voher definierte Wert (z.B. 7) erhöt sich um einen. Dann bleibt er aber bei 8.

var Anzahl = parseFloat(7);



function gedrueckt(Anzahl) {
    Anzahl += 1;
    console.log(Anzahl);
}

Wisst ihr woran das liegen könnte?

Ich hoffe auf antworten

Bohne47

...zur Frage

Per if Abfrage schauen ob Button gedrückt wird JavaScript?

Hi, ich versuche es hinzubekommen, dass wenn ein Button gedrückt wird eine Funktion aufgerufen wird. Wenn nicht dann eine andere. Ungefähr so soll es aussehen:

if (Button1 wurde angeklickt) {
   submit()
} else {
   counter()
}

Klingt einfach, aber ich hab nichts brauchbares gefunden...

...zur Frage

stimmt dieser code?

ich hab was ausprobiert aber da scheint was falsch zu sein, sieht man einen Fehler auf den ersten blick?

schreibe den javascript code für ein spiel und erkläre hinterher wie es funktioniert

// variablen
let score = 0;
let time = 10;

// Elemente im HTML-Dokument auswählen
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start-button');
const gameArea = document.getElementById('game-area');

// Start
startButton.addEventListener('click', startGame);

function startGame() {
  startButton.disabled = true;
  score = 0;
  time = 10;
  scoreDisplay.textContent = score;
  timeDisplay.textContent = time;
  gameArea.addEventListener('click', increaseScore);
  countdown();
}

// Punktzahl erhöhen
function increaseScore() {
  score++;
  scoreDisplay.textContent = score;
}

// Countdown-Funktion
function countdown() {
  const timer = setInterval(() => {
    time--;
    timeDisplay.textContent = time;
    
    if (time === 0) {
      clearInterval(timer);
      endGame();
    }
  }, 1000);
}

// ende
function endGame() {
  gameArea.removeEventListener('click', increaseScore);
  startButton.disabled = false;
  alert('Deine Punktzahl: ' + score);
}

Der Code beginnt mit der Initialisierung einiger Spielvariablen:

(Punktzahl) und

(Zeit). Diese Variablen werden später im Spiel verwendet, um den Fortschritt des Spielers zu verfolgen.

Als Nächstes werden einige Elemente im HTML-Dokument ausgewählt, die zur Anzeige und Interaktion mit dem Spiel verwendet werden. Dazu gehören das Element, das die Punktzahl anzeigt (

), das Element, das die verbleibende Zeit anzeigt (

timeDisplay

), der Startbutton (

startButton

) und das Spielfeld (

gameArea

startButton

erhält einen Eventlistener, der auf das Klicken des Buttons reagiert. Sobald der Startbutton geklickt wird, wird die Funktion

startGame

aufgerufen.

Die Funktion

startGame

wird aufgerufen, wenn das Spiel gestartet wird. Sie deaktiviert den Startbutton, setzt die Punktzahl und die verbleibende Zeit auf ihre Ausgangswerte zurück und aktualisiert die Anzeige entsprechend. Ein Eventlistener wird dem Spielfeld hinzugefügt, um auf Klicks des Spielers zu reagieren und die Punktzahl zu erhöhen. Die Funktion

countdown

wird aufgerufen, um den Countdown zu starten.

Die Funktion

increaseScore

wird aufgerufen, wenn der Spieler auf das Spielfeld klickt. Sie erhöht die Punktzahl um eins und aktualisiert die Anzeige entsprechend.

Die Funktion

countdown

startet den Countdown von 10 Sekunden. Dazu wird ein Timer mit

setInterval

verwendet, der alle 1000 Millisekunden (1 Sekunde) die verbleibende Zeit um eins verringert und die Anzeige aktualisiert. Wenn die Zeit auf 0 reduziert wird, wird der Timer mit

clearInterval

gestoppt, und die Funktion

endGame

wird aufgerufen.

Die Funktion

endGame

beendet das Spiel. Sie entfernt den Eventlistener vom Spielfeld, aktiviert den Startbutton wieder und zeigt eine Benachrichtigung an, die die erreichte Punktzahl des Spielers anzeigt..

...zur Frage

XMLHttpRequest Javascript mit PHP POST-Methode Funktion in Datei, die aufgerufen wird ausführen?

Ich habe auf meiner Website ein Formular, welches ich über Javascript auswerte und die Werte mit XMLHttpRequest über POST an eine PHP Datei übergebe. Um diese geht es auch. In ihr möchte ich eine Javascript funktion ausführen, die nicht in der PHP Datei steht. Ich habe mehreres probiert aber nicht hinbekommen. Nach etwas Google Suche habe ich mehrfach gelesen, dass das Skript erst nach vollenden des XMLHttpRequests ausgeführt wird. Stimmt das so? und was bedeutet das für mich?

PS: Bin neu in Javascript

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zur Frage

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...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

Javascript Funktion *auch* bei onload ausführen?

Hallo liebe Community,

wenn ich schreibe:

window.onload = function(){
  element.onclick = element.onchange = function(){ alert("Funktion aufgerufen"); }
  /* Anderer Code */
}

Dann wird die Funktion sowohl bei onlick als auch bei onchange ausgeführt.

Ich möchte, dass sie beim Aufrufen der Elternfunktion und bei onchange ausgeführt wird, also folgendes, ohne die Funktion zweimal zu schreiben:

 window.onload = function(){
  alert("Funktion aufgerufen");
  element.onchange = function(){ alert("Funktion aufgerufen"); }
  /* Anderer Code */
}

Wie kann ich das umsetzen?

...zur Frage

HTML Javascript - Beim Drücken von Enter Button anstatt Submit

Hallo

Ich habe mir einen kleinen Rechner gebastelt und möchte da nun die Eingabefelder mit Javascript auslesen. Das funktioniert auch alles.

Allerdings mache ich das ganze mit einem normalen anstelle eines Submit-Buttons, da sonst die Seite neu geladen wird und dadurch alle Werte in den Eingabefeldern weg sind.

Mein Problem dabei ist, das, wenn man Enter drückt, meine Funktion nicht aufgerufen wird, da es ja nur ein gewöhnlicher Button ist. Ist es möglich, ein Mittelding zwischen beiden Buttons zu machen? Also einerseits soll die Seite nicht neu geladen werden (was beim Submit-Button passieren würde), andererseits soll, wenn man Enter drückt, die Funktion eines bestimmten Buttons ausgeführt werden.

Ich hoffe, ihr könnt mir helfen.

Phippe

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen