js an php

[Nebbiolo]

Hallo

Wie bekomme ich diese "Moves" als Zahl von js in php?

<span id="Moves">0</span>

Vielen Dank und einen schönen Sonntag, Nebbiolo

[Rolf B]

Hallo Nebbiolo,

ohne weiter gehende Informationen zum Problem kann man das nur mit einem langen Essay beantworten, das auf alle möglichen Konstellationen eingeht.

D.h. du müsstest uns bitte deutlich mehr Infos geben. Und ich nehme an, der erste Lösungsschritt wird in der Erkenntnis bestehen, dass dieses span Element nicht das zweckmäßigste Element für das Problem ist.

Rolf

[MudGuard]

Hi,

D.h. du müsstest uns bitte deutlich mehr Infos geben. Und ich nehme an, der erste Lösungsschritt wird in der Erkenntnis bestehen, dass dieses span Element nicht das zweckmäßigste Element für das Problem ist.

Ich hätte als ersten Schritt die Erkenntnis gesehen, daß PHP auf dem Server und JS "Lichtjahre später" auf dem Client abläuft.

Und daß ohne Kommunikation zwischen Client und Server nix geht.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

es ist ja ein Wechselspiel. WHILE (user will was) { PHP auf dem Server, JS auf dem Client }

Und nun muss man erstmal das Gesamtkonstrukt kennen, um zu wissen, welche Kommunikation da überhaupt stattfindet, wo diese 0 herkommt, warum sie in einem Span liegt und aus welchem Anlass sie zum Server soll. Hat der Server sie vielleicht schon mitgeschickt und sie soll wieder zurück? Möchte sie vielleicht in einer $_SESSION leben? Oder in einem Viewstate (a.k.a. input type="hidden")? Oder der value eines Buttons sein. Oder in einem Get-Parameter einer URL mitfahren?

Client/Server-Kommunikation ist so vielfältig, dass man ohne Kenntnis der Situation nur falsch antworten kann.

Rolf

[Nebbiolo]

Hallo Rolf

Vielen Dank für die Antwort!

Ich weiss gar nicht wie ich das genau beschreiben soll ... Es ist ein Memory-Spiel das vorwiegende in js geschrieben ist und ich möchte die Anzahl Bewegungen (moves) mit php lesen können. Im js-Script sieht eine Kurzfassung etwa so aus:

    moveSlide(slideId) {
        let moveSlide = this.node.querySelector(slideId);
        moveSlide.classList.add('show');

Ich habe nun unter anderem folgendes versucht:

  var moves = memoryMatches;
	window.location.href = "gebein.php?moves=" + moves;

Aber das wird keine Zahl angezeigt :-( Kannst du vielleicht etwas anfangen damit?

[Rolf B]

Hallo Nebbiolo,

okay, du möchtest die Anzahl der Züge zählen und sie PHP mitgeben.

   var moves = memoryMatches;

Was ist memoryMatches? Eine andere globale Variable? Was steht da drin und wie steht das in Bezug zum span-Element?

   window.location.href = "gebein.php?moves=" + moves;

Mit dieser Zuweisung bewirkst Du einen neuen Seitenabruf, bei dem der Inhalt von moves an den Query-Parameter moves angehängt wird. Das setzt aber voraus, dass in der Variablen namens moves etwas steht, das sich als Zeichenkette darstellen lässt.

Deshalb die Frage, was in memoryMatches drin steht.

Was steht, nachdem Du diese Zuweisung gemacht hast, in der Adresszeile des Browsers? Wenn in moves beispielweise 17 drin stand, sollte nach der Location-Zuweisung die Adresse https://example.com/geben.php?moves=17 angezeigt werden.

Rolf

[Nebbiolo]

Ja, in diesem Feld steht eine Zahl die im index.php so ausgegeben wird.

<span id="memoryMatches">0</span>

Im index.php wir das js wie folgt aufgerufen:

    <script src="js/memory-game.js"></script>
    <script type="module">
        import MemoryCards from './js/memory-cards.js';
        let memoryGame = new MemoryGame({
            selector: document.getElementById('memoryGame'),
            cards: MemoryCards.getCards()
        });
    </script>

Ich kann nicht gut das ganze Script (230 Zeilen) hier anzeigen ...

[klawischnigg]

Hi there,

Ich kann nicht gut das ganze Script (230 Zeilen) hier anzeigen ...

Brauchst Du auch nicht. Deine Lösung heisst Ajax. Was anderes dürfte dafür nicht in Frage kommen. Denn sobald Du ein PHP-Skript aufrufst, ist Dein schönes Javascript sofort weg...

[Rolf B]

Hallo Nebbiolo,

die Frage, was in memoryMatches drin steht, ist unbeantwortet. Ist das der Textinhalt des Span, oder ist es die Objektreferenz zum Span?

Ich kann nicht gut das ganze Script (230 Zeilen) hier anzeigen ...

Stimmt. Gibt's das Ding denn irgendwo online? Oder ist das Spielerei im Intranet?

(Klawischnigg) Deine Lösung heisst Ajax.

Mutmaßlich schon. Muss dann aber in den Gesamtkontext passen.

Rolf

[Nebbiolo]

Gibt's das Ding denn irgendwo online? Oder ist das Spielerei im Intranet?

Es ist wirklich eine kleine Spielerei für meine Freunde .... https://www.trumpf.ch/memory/

[Rolf B]

Hallo Nebbiolo,

vielleicht solltest Du Tommy Krüger fragen - dessen Memoryspiel hast Du ja inclusive des Hintergrundbildes von Lukas Blazek einfach mal übernommen. Das ist an sich nicht illegal, es ist ja ein Tutorial und Lukas hat die Attributierung nur erbeten, aber nicht verlangt. Es wäre jedoch sicherlich freundlich, die Herkunft zu benennen.

Aber jetzt verstehe ich auch, warum deine Antworten in keiner Weise hilfreich waren: Du hast das Memory-Spiel übernommen und die Bilder ausgetauscht, aber das JS nicht verstanden.

Du möchtest gebein.php aufrufen und die Anzahl der Züge mitgeben. Wann soll das passieren? An Stelle des Klicks auf "Nächstes Spiel"? Dann müsste der Code den Eventhandler für playBtn ersetzen:

   this.playBtn.addEventListener('click', (e) => {
      // gebein-Aufruf hierhin
   });

Ich blicke nochmal zurück:

  var moves = memoryMatches;

Der Zugriff auf memoryMoves wird zu einem Fehler führen, weil memoryMoves undefiniert ist. Hierbei handelt es sich um eine Eigenschaft des MemoryGame-Objekts, und deshalb musst Du this.memoryMoves verwenden.

Und wie ich sehe ist this.memoryMoves das Ergebnis eines querySelector()-Aufrufs, d.h. darin steht nicht der Wert des span, sondern ein Verweis auf das Objekt, das diesen Span beschreibt. Es ist aber nicht nötig, den Inhalt herauszuholen, denn es gibt auch noch this.cardMoves, worin die Züge gezählt werden und was nach jedem Zug in den memoryMoves span übertragen wird.

   this.playBtn.addEventListener('click', (e) => {
      window.location = `gebein.php?moves=${this.cardMoves}`;
   });

sollte dein Problem lösen. Ein String in Backticks ist ein Template-String, und wenn man darin eine JavaScript-Variable in ${...} einschließt, wird ihr Wert an diese Stelle gesetzt.

ES SEI DENN, du möchtest das Memory-Spiel auf deiner Feier als Dauerspielerei laufen lassen, tatsächlich ein nächstes Spiel starten und die Bewegungszahl lediglich auf deiner Website speichern. In dem Fall wäre es nützlicher, mit fetch einen Ajax-Request zu machen, wie Dein Landsmann (Ex-Landsmann?) Andre schrieb und wie Klawischnigg andeutete. Dann wäre aber auch ein Eingabefeld für den Namen vonnöten, damit man nach der Feier weiß, wer das beste Gedächtnis hatte (bzw. am wenigsten besoffen war 😉).

By the way: Ist es fiese Absicht, dass die Bilder 2 und 16 identisch sind? Oder fehlt Dir einfach nur noch ein Bild?!

In 3 Wochen dann einen herzlichen Glückwunsch von Selfhtml 😉

Rolf

[Ryuno-Ki]

Moin Rolf,

In dem Fall wäre es nützlicher, mit fetch einen Ajax-Request zu machen, wie Dein Landsmann (Ex-Landsmann?) Andre schrieb und wie Klawischnigg andeutete.

Für's Protokoll: Ich war nie Schweizer. Heutzutage darfst echt keine TLD mehr verwenden, um den Familiennamen abzubilden 🙄

Ich mag die Menschen dort.

Gruß,

[Nebbiolo]

Hallo Rolf

Ich habe dein Beitrag erst jetzt gelesen ... warum auch immer.

Also, ich habe kein Copyright oder ähnliches des Memory-Spieles gefunden ... und natürlich hätte ich auch das Hintergrundbild etc. geändert.

Aber dein Beitrag hat mich veranlasst das Ganze zu löschen ... in meinem Alter brauche ich keine Kenntnisse von js, Ajax etc. - das Alter wirst du ja auch herausgefunden haben.

Schade, er war als eine etwas andere Geburtstagsparty gedacht ...

Gute Zeit und Grüsse, Nebbiolo

[Rolf B]

Hallo Nebbiolo,

ich wollte Dich nicht demotivieren. Von Löschen war keine Rede - von Copyrightverletzung auch nicht. Die Bilder sind das einzig Relevante, was Urheberrecht angeht, und die hast Du ja selbst beigesteuert.

Das Hintergrundbild war ausdrücklich als frei beschrieben, es war lediglich eine Nennung des Autors gewünscht.

Und das Memory war ein Tutorial. Der Autor schreibt auf seiner Impressumseite ausdrücklich, dass Kopien für den privaten Gebrauch erlaubt sind. Mit einer Benennung der Quelle wird er zufrieden sein, das Spiel wird ja auch nicht verbreitet.

Ein Memory-Spiel zum Jubilar auf einer Geburtstagsfeier ist ein netter Gag.

Rolf

[Felix Riesterer]

Lieber Nebbiolo,

  var moves = memoryMatches;
	window.location.href = "gebein.php?moves=" + moves;

Aus der Oper Der Freischütz

Samiel! Samiel! erschein'!

Bei des Zaubrers Hirngebein!

Samiel! Samiel! erschein'!

Korrekte Imperative braucht kein Mensch mehr. Vergesse es! o_O Wie alt muss ich nur geworden sein, um mich daran zu stören...

Liebe Grüße

Felix Riesterer

[Ryuno-Ki]

Moin Nebbiolo,

da gibt es mehrere Möglichkeiten. Weiter unten hast du ja erläutert, dass das Spiel in JavaScript geschrieben wurde.

Damit wird der nächste Spielzug nicht mit PHP erzeugt (ein Verstecktes Formularelement fällt damit schon einmal raus).

Bleibt noch AJAX, d.h. du hast eine Route in PHP, die nur an dem Wert interessiert ist. Weil du potenziell Daten auf dem Server veränderst, wäre ein Fetch mit der POST-Methode semantisch am naheliegendsten.

Könnte in etwa so aussehen:

fetch("gebein.php", {
  method: "POST",
  body: JSON.stringify({ moves: 0 })
})
.then((response) => response.text())
.then((data) => console.log(data))

Gefühlt würde ich das Absetzen, wenn entweder die Seite verlassen wird oder das Spiel beendet wurde.

Das Setzen von location.href löst regelmäßig ein Neuladen der Seite aus. Damit geht unter Umständen der Spielfortschritt verloren.

Gruß,

[Nebbiolo]

Vielen Dank André für deine Antwort!

Ich möchte einfach am Schluss statt "nächstes Spiel" den Link zum gebein.php&moves=xx - mit dem Parameter möchte ich dann eine Rangliste machen. Also muss man keine Rücksicht auf "Unterbrechnung" des Spieles nehmen. Ich habe versucht folgendes einzubauen ... funktioniert aber nichts ... Hst du vielleicht einen Tipp?

  <span class="memory-moves">Bewegungen: <span id="memoryMoves">0</span></span>
  <span class="memory-matches">Treffer: <span id="memoryMatches">0</span> <span class="memory-matches-cards" id="memoryMatchesCards"></span></span>
</div>
<div class="modal modal-fadeIn" id="modal-finish">
  <div class="modal-stage">
    <div class="modal-body">
      <h1>Alle Paare gefunden!</h1>
      <p><strong>Gratulation!</strong> Du hast alle Paare gefunden.</p>
<script>
fetch("gebein.php", {
  method: "POST",
  body: JSON.stringify({ moves: 0 })
})
.then((response) => response.text())
.then((data) => console.log(data))
</script>
   <button class="playBtn">Nächstes Spiel</button>

[Ryuno-Ki]

Moin Nebbiolo,

Vielen Dank André für deine Antwort!

Keine Ursache.

Ich möchte einfach am Schluss statt "nächstes Spiel" den Link zum gebein.php&moves=xx - mit dem Parameter möchte ich dann eine Rangliste machen.

Ist ja unter Freunden. Da wird schon niemand die URL-Paramter verändern, um zu schummeln.

Also muss man keine Rücksicht auf "Unterbrechnung" des Spieles nehmen.

Verstehe.

Ich habe versucht folgendes einzubauen ... funktioniert aber nichts ...

Ich nehme mal das Markup so hin. Stelle dich drauf ein, dass $MENSCHEN hier $GEDANKEN zu äußern werden. Ist in meinen Augen eine andere Baustelle.

Hast du vielleicht einen Tipp?

Ich pass mal das Snippet ein wenig an:

<!-- […] -->
<div>
  <span class="memory-moves">Bewegungen: <span id="memoryMoves">0</span></span>
  <span class="memory-matches">Treffer: <span id="memoryMatches">0</span> <span class="memory-matches-cards" id="memoryMatchesCards"></span></span>
</div>
<div class="modal modal-fadeIn" id="modal-finish">
  <div class="modal-stage">
    <div class="modal-body">
      <h1>Alle Paare gefunden!</h1>
      <p><strong>Gratulation!</strong> Du hast alle Paare gefunden.</p>
      <a class="playBtn" disabled>Nächstes Spiel</a>
      <script>
        const moves = document.getElementById("memoryMoves").textContent;
        const matches = document.getElementById("memoryMatches").textContent;
        const params = new URLSearchParams({ moves, matches });
        const playButton = document.querySelector(".playBtn");
        playButton.setAttribute("href", "gebein.php?" + params.toString());
        playButton.removeAttribute("disabled");
      </script>
      <!-- […] -->
    </div>
  </div>
</div>

Viel Spaß!

Gruß,

[Nebbiolo]

Vielen Dank André!

Schon zu früh gefreut ... der Link funktioniert nun bestens ... nur leider wird nicht die reale Zahl sondern "gebein.php?moves=0&matches=0" angezeigt.

[Ryuno-Ki]

Moin Nebbiolo,

ein Schritt nach dem anderen.

Es tut. Für den Wert verweise ich auf den Kommentar von Rolf.

Wäre auch praktisch, wenn du die finale Lösung dann einmal erklären könntest. Zeile für Zeile.

Die Energie des Verstehens und alles 😇

Gruß,

[Rolf B]

Hallo Ryuno-Ki,

Es tut.

Nicht.

(Es) wird nicht die reale Zahl sondern "gebein.php?moves=0&matches=0" angezeigt

Weil:

$GEDANKEN = <<<ROLF  
  Der Button kann ruhig ein Button bleiben und muss kein disableter
  Link sein, aber der Code, der den Ajax-request durchführt, muss in
  einem Eventhandler zum Button stecken und darf nicht einfach als
  Script hinter den Button geschrieben werden.
ROLF;

Ich find's übrigens makaber, die Antwortseite bei einem Spiel zum 75. Geburtstag "Gebein" zu nennen (siehe hier, falls das unter Schweizern kein Begriff ist). Ich hoffe, Du hast noch ein paar Jahre und kannst deinen Nebbiolo genießen, lieber Walter 😉

Rolf

[Auge]

Hallo

Ich find's übrigens makaber, die Antwortseite bei einem Spiel zum 75. Geburtstag "Gebein" zu nennen …

Na DANKE, dass es endlich mal einer sagt. Jedesmal, wenn ich in diesem Thread „gebein.php“ gelesen habe, juckte es mir in den Fingern. Aber nur deshalb ein Posting mit dem Hinweis auf die Doppeldeutigkeit zu schreiben, war es mir doch nicht wert.

Schön, Rolf, dass du es im Rahmen einer Antwort gesagt hast. 🙏

😅

Tschö, Auge