bouton clic deux fois pour lancer la function java
Bonjour,
Voila je rencontre un petit problème avec mon code.
Ce que je fais
Décrivez ici votre code ou ce que vous cherchez à faire
Mon boutton
<button class="btn btn-primary" id="btnphoto" onclick= "afficheAvatarBlock('editAvatarBlock')";>Changer photo</button>ma div qui est cacher au depart avec un display:none
<form method="POST" action="" enctype="multipart/form-data">
<div class="editAvatarBlock" id="editAvatarBlock">
<div class="btn-right"><button class="btn btn-primary" name="change_avatar">Changer son avatar</button></div>
</div>
</form>Mon code java en fin de page
<script type="text/javascript">
function afficheAvatarBlock(id){
var divelement = document.getElementById('editAvatarBlock');
var btelement = document.getElementById('btnphoto');
if((divelement.style.display == 'none') && (btelement.style.display == 'block'))
divelement.style.display ='block',
btelement.style.display ='none';
else
divelement.style.display ='none',
btelement.style.display ='block';
}
</script>Ce que je veux
au début , je cherchais a juste utilisé un input caché avec un label niveau esthétique(cela fonctionne pour chercher une image ) puis je devais valider mon formulaire complet pour faire les changements et je me retrouvais sur profil.
La j'ai décomposer mon edition profil pour valider des portions dont entre autre l'avatar sans devoir valider tout. j'ai du replacer en autre bouton pour valider le formulaire avatar. Et au final avoir un deux bouton un pour choisir limage et un autre pour valider l update de la photo pas trop top. Donc, j'ai changer un peu le code pour obtenir l image avec le bouton"changer photo" qui affiche au clic une div et fais disparaitre le bouton .
Ce que j'obtiens
J'obtiens bien le résultat que je désire, mais je suis obliger de clic deux fois sur le bouton "changer photo" pour valider l'apparition de la div
11 réponses
Moi je ferais comme ça
<button class="btn btn-primary" id="btnPhoto" onclick= "afficheAvatarBlock()">Changer photo</button>
<form method="POST" action="" enctype="multipart/form-data">
<div class="editAvatarBlock" id="editAvatarBlock" style="display:none" >
<div class="btn-right">
<button class="btn btn-primary" name="change_avatar">Changer son avatar</button>
</div>
</div>
</form>
<script>
function afficheAvatarBlock(){
var editAvatarBlock = document.getElementById('editAvatarBlock');
var btnphoto = document.getElementById('btnPhoto');
if((editAvatarBlock.style.display == 'none')){
editAvatarBlock.style.display ='block';
btnphoto.style.display ='none';
}
}
Après je ne comprends pas trop le 'esle' qui ne sert à rien, vu que ton bouton photo est masqué.
j ai commencer la construction de ma function ainsi :) , donc me suis pas pris la tête et continuer dans se sens.
Voilà ainsi c'est mieux
function afficheAvatarBlock(id){
if((editAvatarBlock.style.display == 'none') && (btnphoto.style.display == 'block'))
editAvatarBlock.style.display ='block',
btnphoto.style.display ='none';
else
editAvatarBlock.style.display ='none',
btnphoto.style.display ='block';
}Mais ne fixe pas le problème que je dois clic deux fois sur le bouton pour rendre visible ma div
<button class="btn btn-primary" id="btnphoto" data-togglediv= "#editAvatarBlock">Changer photo</button>var els = document.querySelectorAll('[data-togglediv]')
for(var i = 0; i < els.length; i++) {
var el = els[i]
togglediv(el)
}
// Tu sélectionne tout les élements qui contiennent l'attribut data-togglediv
// Tu lance la fonction togglediv() avec l'élement en paramètres
// Et c'est la fonction qui greffe un évenement !
function togglediv(el) {
el = document.querySelector(el)
el.addEventListener('click', function(e) {
e.preventDefault() //Tu supprime l'action par défaut
//Le reste de ta fonction avec tes test et tes changements
})
}Edit : L'avantage est de permettre à ton système de devenir flexible, tu pourra l'adapter à plusieurs page ou projets !
j ai une erreur Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object HTMLSpanElement]' is not a valid selector
Il faut savoir, qu'il faut envoyer un sélecteur de type .maClassQueJeChoisi ou #MonIdTropPeter !
@etorion ça dépend de si il veut rendre son programme plus général ou juste l'utiliser pour cette chose précise !
salut etorio, juste une petite erreur dans ton code
if((editAvatarBlock.style.display == 'none'))
il manque le ! devant le ==
if((editAvatarBlock.style.display !== 'none'))
cela lui donne une condition true
et lla variable n'etait pas la meme btnphoto et btnPhoto
sinon merci cela fonctionne
@jeremie
désoler de la lenteur j'improvise avec mes connaissances sur le java quand j'ai lu ton code me suis un peu perdu alors que c'est banal pour toi mdr. Mais java et moi ,bah on a pas encore eu le temps de bien se comprendre du moi par rapport a lui.
Donc je retourne étudier se language pour bien l'assimiler et le comprendre et stopper les fautes absurdes.
(Ce demandé pourquoi je dois clic deux fois alors que juste un peu de compréhension et tout devient plus claire.
sinon jeremie, je sais que je vais te rendre fou mais j'ai un blême a nouveau avec mon avatar, avec le unlink qui me fais une erreur quand nouveau compte donc effacer l'image par defaut qu'il ne trouve pas dans le chemin d'acces mais cela doit se regler avec un if mais quand je veux changer a nouveau d'avatar il me met une image vide certainement du au unlink qui efface l'image que j'ai upload et renvoi une image vide.
Dois-je refaire un nouveau topic ou je peux continuer sur l'ancien qui a été validé dans le forum php?