Afficher une div

**sylvain257** · 26/08/2020, 21h52

Hello,

Voila ce que je veux faire : J'ai des checkbox, je veux afficher des images. Chaque checkbox fait référence à un fichier particulier. Par conséquent, je suis parti sur le principe que l'image avait le même nom que la valeur de la checkbox. Jusque là pas de pbs. Seulement je voudrais boucler ce script (avec forEach) afin de ne pas à avoir de créer une nouvelle div pour une nouvelle image. En gros je veux que le HTML soit généré via un script JS.

C'est exactement ce code : https://www.tutorialrepublic.com/cod...ing-checkboxes à ceci près qu'il y a 3 DIV pour 3 checkboxes.

Comment faire ?

Merci pour votre aide :-)

Sylvain

**javatwister** · 27/08/2020, 10h43

Salut,

Principe: http://javatwist.imingo.net/checkimages.htm

- un nombre de checkboxes égal au nombre d'images;
- des images invisibles a priori;
- un click sur une checkbox change la visibilité de l'image correspondante;

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
 
<style>
.hide {display:none;text-align:center;}
#check, #pitch {margin:50px;text-align:center;}
</style>
 
</head>
<body>
 
<div id="check">
	<label><input type="checkbox">image 1</label>
	<label><input type="checkbox">image 2</label>
	<label><input type="checkbox">image 3</label>
	<label><input type="checkbox">image 4</label>
	<label><input type="checkbox">image 5</label>
	<label><input type="checkbox">image 6</label>
</div> 
 
<div id="pitch">
	<img class="hide" src="sm01.gif" alt="un" />
	<img class="hide" src="sm02.gif" alt="deux" />
	<img class="hide" src="sm03.gif" alt="trois" />
	<img class="hide" src="sm04.gif" alt="quatre" />
	<img class="hide" src="sm05.gif" alt="cinq" />
	<img class="hide" src="sm06.gif" alt="six" />
</div> 
 
 
<script>
const ch=document.querySelectorAll("#check input");
ch.forEach((v,i)=>{
        v.addEventListener("click",()=>{
                document.querySelectorAll("#pitch img")[i].classList.toggle("hide");
        })
})
</script>
 
</body>
</html>

**sylvain257** · 27/08/2020, 13h42

Bonjour,

Merci pour ton retour mais c'est précisément ce que je ne veux pas. Je veux pouvoir générer de l'HTML avec un script JS.

Pour faire la traduction française de mon script, je veux que celui ci fasse : "Pour chaque checkbox, tu récupères leurs valeurs ; quand elle est checkée tu affiches l'image dt le nom correspond à sa valeur et tu l'affiches dans la div2 ; quand elle est désélectionnée tu l'enlèves.".

C'est un script typique pour utiliser les boucles, ici ForEach, et utiliser la méthode .push().

Je sais que je suis pas loin, mais je bloque.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var legend = [];
        $('input[type="checkbox"]').click(function(){
          var val = $(this).attr("value");
            legend.forEach(function(element){
                document.getElementById("legende").innerHTML +=
                      '<div class="' + element.get("val") + '"><table><tr><td><img src="' + element.get("val") +'.png"></td></tr></table></div>'
            })
        });

Mais ça marche pas....

Merci pour votre aide

Sylvain

**-Nikopol-** · 27/08/2020, 17h45

est-ce que ceci fait l'affaire?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
</head>
 
<body>
    <div id="check">
        <label><input type="radio" name="radio">image 1</label>
        <label><input type="radio" name="radio">image 2</label>
        <label><input type="radio" name="radio">image 3</label>
        <label><input type="radio" name="radio">image 4</label>
        <label><input type="radio" name="radio">image 5</label>
        <label><input type="radio" name="radio">image 6</label>
        <div class="container-image"></div>
    </div>
    <script>
        const inputs = document.querySelectorAll("#check input");
        const container = document.querySelector('.container-image');
        inputs.forEach((input,i) => {
            let img = '<img src="https://placehold.it/'+150/(1+i)*4+'">'
            input.addEventListener('click',()=>{
                if(input.checked){
                    container.innerHTML='';
                    container.insertAdjacentHTML('afterbegin',img)
                }
            })
        })
    
    </script>
</body>
</html>

**javatwister** · 27/08/2020, 20h50

De fait, je pense que tu souhaites des boutons radio... te permettant de n'afficher qu'une image à chaque fois...;
Bref, clarifie déjà ce que tu veux en terme d'interface, avant de penser à la technique pour y arriver.

**javatwister** · 27/08/2020, 22h16

Tente ce 2e lien: http://javatwist.imingo.net/checkimages2.htm

(et si on se plante, que veux-tu de plus précis?)

Afficher une div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager