Problème innerHTML = " "

Résolu
pilooFR Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   -  
pilooFR Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'ai un petit soucis que je n'arrive décidément pas à résoudre, c'est pourquoi je m'adresse à vous.
Pour faire une galerie photo sur mon site, je souhaiterai après que le visiteur ait cliqué sur l'image en miniature et que celle-ci se soit agrandit avec un background en fond noir, que lorsque l'on clique sur ce fond, l'image ainsi que le background disparaissent.
Pour cela je fais un onclick() sur mon fond noir qui renvoit à une fonction remove qui doit supprimer le contenu de ma div 'container' qui contient ma photo et mon background. Avec cette ligne de code :
document.getElementById('container').innerHTML = "";
Seulement ça ne supprime que le background. Sauriez vous quel est le problème ? Et comment le résoudre ?
Un petit lien pour illustrer mon problème.
https://jsfiddle.net/eoqa5sja/1/

Cordialement,

pilooFR

1 réponse

animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut
essaie ca
<div id='blackBg' onclick='remove()'>click on me
<div id='carre'></div>
</div> 


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
pilooFR Messages postés 20 Date d'inscription   Statut Membre Dernière intervention  
 
Déjà merci de la réponse :)
J'y avais déjà penser. Mais ya deux problèmes à ce truc c'est que :
- Comme je mets un opacity de 0.7 sur mon fond noir il s'appliquera aussi à ma photo (ce que je ne veux pas).
- Et le problème n°2 c'est que je veux que lorsque l'on clique précisément sur l'image cela appelle une autre fonction qui passera à la photo suivante. Et pas que le fond et la photo disparaissent.
Test jsfiddle : https://jsfiddle.net/eoqa5sja/8/
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Pourquoi ne pas utiliser un plugin de diaporama en jquery
ex : https://css-tricks.com/anythingslider-jquery-plugin/
0
pilooFR Messages postés 20 Date d'inscription   Statut Membre Dernière intervention  
 
Parce que je n'en ai trouvé aucun qui me convenait réellement. Et puis je pense que c'est en faisant soit même que l'on apprend. :)
0
Utilisateur anonyme
 
Salut,

tu peux mettre un background-color avec un opacité sans que l'image devienne transparente. Il faut utiliser la notation rgba ou le a (alpha) est l'opacité.
https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

Tu peux essayer de créer des noeuds et de les suprimer.

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641#ui-id-3
0
pilooFR Messages postés 20 Date d'inscription   Statut Membre Dernière intervention   > Utilisateur anonyme
 
Merci pour le conseil du
background-color: rgba(,,,); 

Pour le reste je vais y jeter un coup d'oeil. :)
Je t'en reparle si j'ai un soucis.
0