Affichage donnée switch box

Eléphanteau du PHP | 10 Messages

04 oct. 2022, 17:12

Bonjour,

J'ai un switch box (ON/OFF) et j'aimerais afficher les données en fonction que le switch est à ON ou à OFF tout ça tant qu'il y a des données dans la BD.

Présentement mon switch affiche ou non un DIV, mais seulement de ma première ligne de Bd.

Voici mon code:

Code : Tout sélectionner

//Acces BD <?php // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection $sql = "SELECT * FROM table"; $result = $conn->query($sql); while($row = mysqli_fetch_array($result)) { ?> <?php echo '<div id="'.$row["urlName"].'content">'; ?> // Div à afficher ou non <div id="description1" style="display:none"><?php echo '<p>'.$row["description1"].'</p>'; ?></div> <div id="description2" style="display:block"><?php echo '<p>'.$row["description2"].'</p>'; ?></div> // Switch Box <label class="switch"> <input type="checkbox" onclick="change()"> <span class="slider round"> <h1 id="light-text" style="display:none">ON</h1> <h1 id="on" style="position:relative;left:-85px;bottom: 25px;font-size:18px;">On</h1> <h1 id="off" style="position:relative;left:70px;bottom: 65px;font-size:18px;">OFF</h1> </span> </label> // Code Javascript <script> function change() { var x = document.getElementById("light-text"); var description1 = document.getElementById("description1"); var description2= document.getElementById("description2"); if (x.innerHTML === "ON") { x.innerHTML = "OFF"; description1.style.display = "block"; description2.style.display = "none"; } else { x.innerHTML = "ON"; description1.style.display = "none"; description2.style.display = "block"; } } </script> <?php } $conn->close(); ?>
Qui serait en mesure de me donner, ou m'aiguiller, vers une solution?

Merci

Mammouth du PHP | 2703 Messages

04 oct. 2022, 21:30

ce code est dans une boucle :
<?php echo '<div id="'.$row["urlName"].'content">'; ?>
il va générer un id unique (si $row["urlName"] change bien pour chaque ligne).

<h1 id="light-text" style="display:none">ON</h1>
ce code est aussi dans la boucle, donc s'il y a 10 lignes dans la table, il y a 10 éléments qui ont le même id. un id devant être unique, c'est problématique.

il faut donc commencer par faire un code html valide, voir https://validator.w3.org/

Eléphanteau du PHP | 10 Messages

04 oct. 2022, 22:12

Donc il faudrait que

<h1 id="light-text" style="display:none">ON</h1>

devienne

<h1 id="light-text<?php $row["urlName"] ?>" style="display:none">ON</h1>

et mon js:
var x = document.getElementById("light-text<?php $row["urlName"] ?>");

Ou quelque chose comme ça?


Car oui, $row["urlName"] a une valeur unique.