Affichage donnée switch box

Version imprimable

Bonjour,

J'ai un switch box (ON/OFF) et j'aimerais afficher les données en fonction que le switch est à ON ou à OFF.

Présentement mon switch affiche ou non un DIV, mais tant qu'à avoir une BD mieux vaut l'utiliser au lieu d'afficher ou non un div.

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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>

Qui serait en mesure de me donner, ou m'aiguiller, vers une solution?

Merci

04/10/2022, 09h00
mathieu

je pense que c'est plus une question pour le forum javascript.
d'ailleurs, j'ai testé le code javascript et j'ai l'impression qu'il fonctionne déjà comme vous le souhaitez.

Je sais qu'il fonctionne tel quel, ce que je voudrait c'est qu'au lieu d'afficher un div et d'en cacher un à chaque fois, ce soit par exemple:

Code:

1
2
3
4
5
if (x.innerHTML === "$row[data1]") {
		x.innerHTML = "$row[data2]";
} else {
		x.innerHTML = "$row[data1]";
	}

Et mon script fonctionne à moitié. Si j'ai une boucle, ça fonctionne que sur le premier:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
		   // Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
 
$sql = "SELECT * FROM myTable";
$result = $conn->query($sql);
while($row = mysqli_fetch_array($result))
{ ?>
<?php echo '<div id="'.$row["urlName"].'content">'; ?>
 
                                    <ul>
                                        <li>
                                            <div class="item">
                                                <div class="text-content">
												<h4><?php echo $row["title"] ?>
<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>
 
	<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>
 
												</div>
											</div>
										</li>
									</ul>
			</div>
 
 
 
<?php }
 $conn->close();
?> 
 
 
 
 
<script>
function change() {
	var x = document.getElementById("light-text");
	  var measurementImperial = document.getElementById("measurementImperial");
  var measurementMetric = document.getElementById("measurementMetric");
	if (x.innerHTML === "Metric") {
		x.innerHTML = "Imperial";
		    measurementImperial.style.display = "block";
	measurementMetric.style.display = "none";
	} else {
		x.innerHTML = "Metric";
		    measurementImperial.style.display = "none";
	measurementMetric.style.display = "block";
	}
 
} 
</script>

04/10/2022, 09h39
mathieu

pour la boucle, ça sera pour une 2e partie.
déjà je n'ai pas compris la différence entre mettre les données dans le code html ou les données dans le code javascript ?
04/10/2022, 09h43
eiffel-mtl

Ce qui fonctionne: le JavaScript met un div à none ou à block tandis ce que je veux faire c'est: si le switch est à on, affiche la valeur1 de la Bd et si c'est à off, ce sera la valeur2 toujours dans le même div.
04/10/2022, 10h01
mathieu

le code de votre 1er message fait bien cela, je ne comprends toujours pas où est le souci.