Iquery funzt nicht

number · 21.04.2020

Hallo,

ich werde gleich noch verrückt. Warum geht das hier nicht:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="../../New folder/normalize.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint
      facere iure dignissimos magni eaque reprehenderit dicta veniam quibusdam
      aliquam!
    </p>
  </body>
</html>

Code:

$("p").on("click", function () {
  $("p").css("background-color", "red");
});

Habe ich was übersehen? Falsch gemacht?

number · 21.04.2020

Wenn ich es direkt in den HTML Code integriere funzt es auf einmal. Warum geht es nicht mit einer externen JS Datei?

Wie muss man man Variabel deklarieren, wenn man diese inhalb einer Iquery function nutzen möchte?

Code:

    var blockA = ["A", "B", "C", "D", "E"];
 $(".press").click(function () {
      $("body").css("background-color", color[4]);
alert("BlockA");
    });

So funktioniert das nicht. Habe es auch mit let und const versucht, aber das geht es auch nicht. Wäre auch nicht richtig, da let und const lokale Variablen sind. Ich hatte mal gelesen, dass der Typ var nicht mehr genutzt wird in JS ist das richtig? Was ist ein anderer globaler Variablentyp damit ich diese innherlab der iquery function nutzen kann?

Außerdem habe ich noch diese Frage:

Code:

      $(".press").click(function () {
        var blockA = ["A", "B", "C", "D", "E"];

        blockA.forEach(function (item, index, array) {
          for (i = 0; i <= index; i++) {
              for(){
                  irgendein code....
              }
            if (blockA[i] === item[i]) {
              console.log("correct" + item[i]);
            }
          }
        });
      });

Warum kann ich hier innerhalb der for Schleife nicht noch eine For schleife erstellen? Bekomme da den Error: SyntaxError: expected expression, got ')'

Dabei habe ich doch bloß dieses Codebrocken standardmäßig eingefügt, ohne an den anderen Klammern etwas zu ändern. Bekomme diese Meldung ziemlich häufig und verliere da schnell den Überblick, welche Klammer wohin gehört.

Myhar · 21.04.2020

Eines nach dem anderen.
Hast du deine Seite nur lokal geöffnet? Also von C:\Pfad\zur\Datei.html ? Dann blockiert der browser wohl https Verbindungen, lass deine Seite auf einem (lokalen) Serve laufen oder binde alle Dateien von der Festplatte ein.

Gewöhne dir auch an die Entwicklerkonsole (F12) zu öffnen. Dort siehst du dann hilfreiche Fehlermeldungen wie "Datei konnte nicht geladen werden 404-Error" oder "Laden von Datei blockiert wegen ..." etc.

Die Entwicklerkonsole ist auch für deine weiteren Probleme unerlässlich, setze dir Haltepunkte im Code und du siehst, welche Variablen zu dem jeweiligen Zeitpunkt welchen Wert haben.

"var" wird sehr wohl noch verwendet, bei größeren /neueren Projekten wird const und let verwendet um genauer arbeiten zu können.

Was für einen Editor verwendest du? Verwende zB visual studio code (ist gratis) das zeigt einem alle zusammengehörigen Klammern an.

Auch kann man in einer for schleife noch eine for schleife definieren, aber um dir zu sagen warum es nicht geht müsste man den Code dazugehörigen Code sehen der den Fehler wirft.

number · 21.04.2020

Hi,

Hatte die .html über den live Server geöffnet. Nutze VIsual Studio Code.

Wenn ich den JS Code in die app.js schreibe, dann läuft der Code nicht. Die Meldung da ist:
ReferenceError: $ is not defined

Was meinst du mit "Haltepunkt"?

let und const sind aber beides varibeltypen für den lokalen Geltungsbereich. Was nutzt man, wenn man etwas global deklarieren muss?

Jetzt auf einmal, klappt es mit der for in der for schleife, komisch...

Aber kann dennoch nicht von einer externen .js datei den code ausführen.

Was ich eigenlich versuche ist: Ich möchte, dass mit jedem klick auf den Button ein Wert des Arrays angezeigt wird. Muss man da die iquery anweisung mit dem button in die for schleife mit integrieren?

Es geht wohl in die Richtung:

Code:

blockA.forEach(function (item, index, array) {
        for (i = 0; i <= index; i++) {
          if (blockA[i] === item[i]) {
          $(".press").click(console.log("correct" + " " + item[i]));

Doch da gibt der mir alles auf einmal aus, und looped nicht durch jeden einzelne element in dem array.

Myhar · 21.04.2020

bezüglich haltepunkte (breakpoints auf englisch) : https://javascript.info/debugging-chrome

$ is not defined heißt $ ist nicht definiert. Heißt in bezug auf jquery dass du eine jquery Funktion verwenden willst obwohl jquery noch nicht geladen ist.

let und const sind aber beides varibeltypen für den lokalen Geltungsbereich. Woher hast du das?
let heißt, die Variable kann nachher ihren Wert noch ändern. const heißt, die Variante ist eine Konstante und kann den Wert nicht mehr ändern (bzw. man kann schon noch änderungen durchführen, aber fürs Grundverständnis reicht das erst mal)

Aber kann dennoch nicht von einer externen .js datei den code ausführen... wird die datei korrekt geladen? (Siehe dev tools)
Wird die Datei zum richtigen Zeitpunkt "ausgeführt" (also jquery zuerst eingebunden, dann die Datei, etc.)

Mit deinem konkreten Problem kann ich dir leider nicht weiterhelfen weil du immer nur unvollständige Code-Ausschnitte postest.

number · 21.04.2020

Ok, dass man let und const schein so nicht zu stimmen, sind dann wohl doch global.

Da, wurde der Code bei Editieren rausgeschmissen: Hier nochmal:

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>

  <body>
    <button class="press">Give out number</button>
    <p></p>
  </body>
  <script>
    $(".press").click(function () {
      var blockA = ["A", "B", "C", "D", "E"];

      blockA.forEach(function (item, index, array) {
        for (i = 0; i <= index; i++) {
          if (blockA[i] === item[i]) {
            $(".press").click(console.log("correct" + " " + item[i]));
            $("body").css("background-color", "green");
            //$("p").html(blockA[0]);
          }
        }
      });
    });
  </script>
</html>

Myhar · 21.04.2020

Was genau soll bei druck auf press passieren? in deinem HTML steht "give out numbers" aber im JS hast du nur Buchstaben?
Auch ist die Frage wann ist welche Nummer (Buchstabe?) richtig? Soll beim ersten mal drücken A, beim zweiten mal drücken B etc. ausgegeben werden?

number · 21.04.2020

Sorry, davon nicht irritieren lassen. Der Button müsste heißen: Give our letters. Genau beim ersten Mal A, beim zweiten B etc...,
Ist der Code so grundsätzlich richtig?

Myhar · 21.04.2020

Nein, der Code ist so grundsätzlich nicht richtig. Du definierst eine .on('click') funktion in einer weiteren .on('click') funktion.

Damit sagst du beim Seiten laden: Der Block innerhalb deiner ersten click funktion wird ausgeführt wenn du einmal klickst. Dann definierst du dort drinnen eine zweite click funktion. Das heißt, wenn du das nächste mal drauf klickst wird der zuerst definierte Code-Block ausgeführt, dabei wird noch eine click Funktion definiert und dann wird die zweite (innere) Click Funktion ausgeführt.
Klickst du dann nochmal auf den button, hast du dann noch eine Funktion mehr die ausgeführt wird.

Du brauchst für einen Klick nur eine solche Funktion.
Entweder du verwendest eine weitere globale Variable die hochzählt wo du gerade warst.
Oder du schneidest einfach die schon ausgegebenen Buchstaben weg und gibst immer dne ersten Buchstaben aus.
Oder ... (gibt da bestimmt x Möglichkeiten wie du das angehen kannst, ganz nachdem was du dann am Ende genau erreichen willst)

number · 21.04.2020

Meinst du so? Weil da bekomme ich die Meldung "correct NaN". Wie meinst du das, mit aktuellen Wert speichern?

Code:

    $(".press").click(function () {
      var blockA = ["A", "B", "C", "D", "E"];

      blockA.forEach(function (item, index, array) {
        for (i = 0; i <= index; i++) {
          if (blockA[i] === item[i]) {
            let start = item[i];
            console.log("correct" + " " + start++);
            $("body").css("background-color", "green");
            //$("p").html(blockA[0]);
          }
        }
      });
    });

Myhar · 21.04.2020

NaN heißt dass es keine Nummer ist. Ich dachte du möchtest keine Nummern sondern Buchstaben ausgeben? Oder doch Nummern?
Nehmen wir an du bist hier beim ersten Element ("A") und sagst dann mit ++ dass er eins dazuzählen soll. Was ist A + 1?
Auch ist dein jetziger Aufbau sehr verwirrend.

Code:

var blockA = ["A", "B", "C", "D", "E"];

$(".press").click(function() {
  $('p').html(blockA[0]);
  blockA.shift();
});

Das ist ein minimalaufbau, keine Ahnung ob dir das weiterhilft.

number · 21.04.2020

Dein Code löst natürlich das Problem, zudem auch noch eleganter. Darauf wäre ich aber nicht gekommen. Kannte die Funktion "Shift" noch nicht. Ist das eigentlich schon eine Art von rekursion? Weil ja keine Schleife läuft, aber dennoch die Funktion einmal durch das Array looped.

Wie sähe die Lösung aus, wenn man das ganze mit einer weitere globale Variable löst, die dann hochzählt? Das was du auch als Lösung vorgeschlagen hättest. Es ist natürlich unnötig, es im Projekt so zu machen, aber nur zum Verständnis.

Ich frage mich wirklich, wie man das programmieren lernen soll. Ich saß jetzt echt sehr lange an dieser Aufgabe und sehe, dass ich sie hätte mir nur einer einfachen Zeile hätte lösen können. Statt das ganze unnötige Zeugs.

Geht es da nur mir so oder ist das am Anfang normal, bis man sich in das ganze Konzept hineinfuchst? Was sind gute Wege um den Lernweg effizienter zu gestalten?

Was ist zum Beispiel hier jetzt nicht richtig?

Code:

var blockA = ["A", "B", "C", "D", "E"];

      $(".press").click(function () {
        blockA.foreach(function (item, index, array) {
          $("p").html(blockA[item]);
        });
      });

Myhar · 22.04.2020

Aller Anfang ist schwer.
Was bei deinen Sachen nicht richtig ist: Du möchtest einen Wert ausgeben, mit "foreach" machst du etwas für jedes Element, also in deinem Fall einmal für A, einmal für B, .... Das ist hier fehl am Platz, du möchtest nicht etwasf ür jeden Wert von blockA machen, du möchtest einmal etwas machen abhängig davon, wie oft du gedrückt hast.

Und nein, das ist keine Art von rekursion. Rekursion ist, wenn sich die Funktion selber wieder aufruft.

Könnte man zb auch so lösen (Hier mit const und let als Beispiel)

Code:

const blockA = ["A", "B", "C", "D", "E"];
const blockLength = blockA.length - 1; // -1 weil index ja bei 0 anfängt. 
let i = 0;
      $(".press").click(function () {
         $('p').html(blockA[i]);
        if (i < blockLength) {
           i++;
        }
      });

Inco · 22.04.2020

Hi,

kann es sein das es einfach nur an der Reihenfolge liegt?

Du scheinst in deiner App.js kein "document.ready" zu haben und arbeitest direkt mit JQuery, aber JQuery gibt es noch nicht, weil es erst danach geladen wird.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="../../New folder/normalize.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>
 
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sint
      facere iure dignissimos magni eaque reprehenderit dicta veniam quibusdam
      aliquam!
    </p>
  </body>
</html>

So herum müsste es theoretisch besser funktionieren, da du zu erst JQuery lädst und danach deine app.js