Récupérer ID que l'on ne connait pas

[rogerbel]

Bonjour à toutes et à tous,
Je suis utilisateur de PHP et MySql exclusif. Non pas que je ne veuille pas coder en JS mais parceque je ne connais rien en JS !
MAIS il va bien falloir m'y mettre.
Ma question est "comment récupérer l'ID d'un élément cliqué quand on la connait pas ? J'ai cherché sur le Net mais je n'ai trouvé que des réponses où on me dit : pour trouver l'ID "Toto" demandes-la avec un GetElementById "Toto" ! Oui mais pourquoi poser la question de savoir quelle est l'ID si on la connait déjà ???
En fait, j'ai une boucle WHILE qui me crée des éléments, chaque élément comporte une ID de la table "NEWS" sortie de ma base (il peut y avoir des trous dans l'ID de la table suite à des suppressions et j'ai besoin de cette ID, pas de la clef de ma boucle...) alors je voulais savoir comment récupérer l'ID de l'élément cliqué créé par la boucle du tableau $resultat du FETCH (ligne A HREF du code)
Je vous serai vraiment reconnaissant d'avoir une réponse et vous souhaite, à toutes et à tous, une excellente journée.

Code : Tout sélectionner

<php>
	    $i = 1;
              while ($i < $lignes) {
                $i%2?$a=0.1:$a=0.2; echo "
                 <div id=\"tit_new_".$i."\" class=\"card_new\" style=\"background-color:rgba(153, 102, 51, ".$a.");\">
                  <div class=\"border-0 tit_new\">
                    <div class=\"row-12 titre_new text-left\">
                      <p>".$resultat[$i]["titre_new"]."</p>
                    </div>
                    <div class=\"row d-inline float-right mr-2\">"; ?><?php
                      $date = new DateTime($resultat[$i]["date_new"]);
                      $metteurEnForme = new IntlDateFormatter( 'fr_FR', IntlDateFormatter::MEDIUM, IntlDateFormatter::NONE); echo "
                      <a class=\"new_id\" href=\"#elem_".$resultat[$i]["id_new"]."\">
                          <p class=\"p-2 mb-0\">".$metteurEnForme->format($date)."
                            <img class=\"ml-3\" src=\"../img/img-div/drapeaux/".$resultat[$i]["chem_drap_pays"]."\" alt=\"drapeau du pays en cours\">
                          </p>
                      </a>
                    </div>
                  </div>
                </div>";
                $i++;
              }?>

[webmaster]

Bonjour

C'est assez facile en JS de récupérer des infos sur l'élément en cours de manipulation avec this

Par exemple

Code : Tout sélectionner

<div id=\"tit_new_".$i."\" class=\"card_new\" style=\"background-color:rgba(153, 102, 51, ".$a.");\" onclick=\"console.log(this.id)\">

Va afficher dans la console du navigateur l'attribut id du div cliqué

[rogerbel]

Bonjour Patron ,
Merci de m'avoir lu. Mais, sauf votre respect, je ne voulais pas "le voir", je le vois dans l'inspecteur sur le HTML, je pourrais le voir avec un echo ou print_r, un var dump, une requête etc. MAIS je ne sais pas traiter cela en local, je ne saurai le faire que via le serveur.
Pour faire simple mon Href m'envoie vers un new et de là j'ai deux boutons, prec et suiv. Comment je fais pour récupérer cette valeur afin de la traiter et mettre les bons href dans mes boutons.
Sinon il va falloir que je fasse un form pour poster ma var et rafraichir ma page........... bref je voulais le faire en local, pas côté serveur et commencer par quelque chose de simple pour commencer à comprendre comment fonctionne JS sans attendre que la troisième édition du livre Tout le JS que je viens d'acheter sur AMAZON arrive dans ma boîte aux lettres...
le onClick j'y mets quoi comme appel et je suppose qu'il est facile de la récupérer par une petite fonction, puisque vous me dites que c'est simple.
De plus si je comprends comment cela fonctionne pour cet exemple je suis sûr que cela entrainera d'autres expériences et d'autres connaissances.

Merci de votre réponse

[webmaster]

Ok, je vois le besoin
Il y a plusieurs facon de procéder

Je partirai sur une variable qui contient le id en cours de visualisation en haut de page

Code : Tout sélectionner

<script>
var idActuel=0;
</script>

Dans le onclick des div, on écrit

Code : Tout sélectionner

onclick="idActuel=this.id"

Et dans les boutons suivant/précédent, on utilise idActuel pour naviguer

Code : Tout sélectionner

onclick="goNext()"

Code : Tout sélectionner

<script>
function goNext() {
 let id=idActuel.replace("tit_new_",""); // On prend juste le nombre
  let idNext=parseInt(id)+1; // On convertit en entier pour faire l'opération
  /* Charger id */
}
</script>

Voila dans l'idée, meme si je ne peux pas tester

PS: le JS est un complément quasiment indispensable de PHP/Mysql. Merci pour l'achat

[rogerbel]

Super merci de votre réponse.

J'ai essayé de caser tout cela ; script en bas, puis en haut, où mettre idActuel (dans le script je suppose) le onClick dans ma boucle sur les lignes Href et copié la fonction en changeant le goNext en goPrec, idNext en idPrec sans savoir si ce sont des termes JS ou des noms choisis...
Je vois bien qu'après ça "il gesticule"... mais juste une fois, en me renvoyant à la dernière new, que je clique prec ou next et puis plus rien, les boutons n'agissent plus.

Certainement ai-je mal posé ma question, en plus le code c'est du péhacheteémeskuelle et ça doit pas être facile à lire (d'ailleurs doit-on protéger le guillemets dans ce cas pour le onClick ?).

En gros voici le plan de mes rêêêves :



Pour ce qui est du "vers id_retour" je vais pas me torturer pour le moment. J'aurais voulu que le visiteur retourne vers la liste des news là où il avait cliqué mais c'est gourmandise. Un href vers le top liste suffira.

Mon problème, en fait, c'est ma structure mentale quand je me promène vers du php ou du css, html, mySql j'arrive à rentrer chez moi. Mais quand j'arrive côté JS je ne sais plus où j'habite.

Sinon, je mettrai les boutons au bas de chaque new dans ma boucle... mais c'est dommage. J'enrage de ne pas accéder à la logique JS...

En tous cas merci pour votre aide et bonne soirée.

[webmaster]

Oui, il faut échapper les " dans le php

donc, on aura normalement

Code : Tout sélectionner

<script>
var idActuel=0;

function goNext() {
 let id=idActuel.replace("tit_new_",""); // On prend juste le nombre
  let idNext=parseInt(id)+1; // On convertit en entier pour faire l'opération
  window.location="nomdelapage.php#elem_"+idNext;
}

</script>

avec le \ sur les onclick inclus dans le php
onclick=\"idActuel=this.id\"

Pour le bouton retour, on peut imaginer le meme principe en ajoutant dans la boucle php une ancre

Code : Tout sélectionner

function goRetour() {
 let id=idActuel.replace("tit_new_",""); // On prend juste le nombre
  window.location="nomdelapage.php#anchre_"+id;
}

Je vous invite à lire ce tuto sur la console du navigateur pour voir d'ou peuvent provenir les erreurs
C'est assez impossible de produire un code correct du premier coup, sans le tester :
https://www.toutjavascript.com/savoir/n ... script.php

[rogerbel]

Bonjour à toutes et à tous,
et merci "patron" pour votre réponse Je prends note et j'essayerai cette semaine (chargée, je viens d'être grand-père !) et je reviendrai vous tenir au courant.
Habere bonum diem apud forum

[elenagilbert]

Vous pouvez attacher un écouteur d'événement click à chaque élément généré par la boucle. Cela déclenchera une fonction lorsqu'un élément est cliqué. Dans la fonction d'écoute d'événements, utilisez ceci pour faire référence à l'élément cliqué et extraire son ID à l'aide de getAttribute('id').
Slope Game

[EthanFinn]

It sounds like you're looking to retrieve the ID of a dynamically generated element when it's clicked. One way to achieve this is by using event delegation fnaf

[bicyclebronze]

En fait, tous les types de code peuvent être utilisés pour certains programmes. Il existe des informations faciles à apprendrecoreball. Surveiller et mettre à jour pour sélectionner la ligne de code appropriée.