Discussion :

[nouby]

Bonjour, auriez-vous une soluce pour ce problème ?

J'ai essayé de plusieurs manières avec ce code :

Code javascript :

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

1
2
 
element.innerHTML+="<p><div class='bouton' onclick='close(\"pannelmedia\");'>Fermer</div></p>";

ça rajoute bien le bouton mais je n'arrive pas à lancer la fonction close(id).

Code javascript :

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

1
2
3
4
5
6
 
function close(id){
    let element=document.getElementById(id);
    element.style.display="none";
 
}

[ASCIIDEFOND]

Salut nouby,

Code JavaScript :

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

1
2
3
4
5
element.innerHTML = '<p><button id="monbouton" class="bouton" onClick="closeParent(this.id)">Fermer</button><p>'
 
function closeParent(id) {
  document.getElementById(id).parentElement.style.display='none';
}

[nouby]

Merci !!!

tu me dépannes super, car j'étais bloqué avec ce truc !

je voulais utiliser une fonction qui puisse fermer n'importe quel élément dont on lui donne l'id, afin d'économiser en sources de code, je vais voir comment adapter ça


EDIT :

J'ai essayé comme ça, avec ton code mais aucun résultat, le bouton este inactif :

Code :

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

1
2
3
4
5
6
7
8
function close(id){
//    let element=document.getElementById(id);
//    element.style.display="none";
    document.getElementById(id).parentElement.style.display='none';
}
 
 
element.innerHTML+='<p><div id="fermedia" class="bouton" onclick="close(this.id);">Fermer</div></p>';

EDIT2 :

Apparement le bouton est bien détecté par le click car si je lance un alert() à la place de close(), l'alert apparait.

Code javascript :

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

element.innerHTML+='<p><div id="fermedia" class="bouton" onclick="alert();">Fermer</div></p>';

Le click est aussi détecté si je met ça dans la fonction close() :

Code javascript :

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

    document.getElementById(id).parentElement.style.left="0"; // Déplace le parent.

EDIT DER :

ça a marché subitement quand j'ai mis ça :

Code :

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

1
2
3
4
5
function close(id){
//    let element=document.getElementById(id);
//    element.style.display="none";
    document.getElementById(id).parentElement.style.display="none";
}

à croire que c'est les guillemets de "none" qui font la différence ...

[ASCIIDEFOND]

Attention, la function close(id) ne fonctionne pas chez moi, surement du fait que close est un mot réservé en JavaScript. C’est pour cela que je l’avais renommé en closeParent.

Sur les apostrophes ou guillemets pour la valeur du style, résultat sera le même.

je voulais utiliser une fonction qui puisse fermer n'importe quel élément dont on lui donne l'id,...

Avec cette méthode, le parent du bouton sera sélectionné. Tu ajoutes simplement le même nom de class à tes boutons.

Code JavaScript :

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

1
2
3
4
5
6
7
element.innerHTML = '<p><button class="bouton">Fermer</button><p>'
 
for (const boutonSelect of document.getElementsByClassName('bouton')) {
    boutonSelect.addEventListener('click', () => {
        boutonSelect.parentElement.style.display = "none";
    })
}

[nouby]

Oui tu as raison pour close(), j'avais renomé en laferme() et ça marchait, mais quand j'ai remis en close() ça marchait plus.

OK pour tes explications, merci beaucoup, c'est super !!!

[NoSmoking]

Bonjour,

Attention, la function close(id) ne fonctionne pas chez moi, surement du fait que close est un mot réservé en JavaScript. C’est pour cela que je l’avais renommé en closeParent.

close n'est pas un mot clé mais effectivement il semblerait qu'il y est collision entre la méthode window.close et la fonction close lors de JavaScript inline.

Dans la mesure où la fonction est appelée dans un addEventListener cela fonctionne, comme par exemple :

Code :

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

document.querySelector(".bouton").addEventListener("click", function(){ close(this.parentNode)})

Dans le cas présent on peut simplement se passer d'une fonction externe :

Code :

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

elem.insertAdjacentHTML("beforeend", "<button class='bouton' onclick='this.parentNode.style.display=\"none\"'>Fermer</button>");

ou si l'on ne veut pas échapper les guillemets

Code :

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

elem.insertAdjacentHTML("beforeend", `<button class="bouton" onclick="this.parentNode.style.display='none'">Fermer</button>`);

↪ voir : Template literals (Template strings)

[nouby]

Merci de tes précisions !
je vais étudier tout ça !

[ASCIIDEFOND]

Salut NoSmoking,

Le lien n'existe pas en Français

↪ voir : Template literals (Template strings)

https://developer.mozilla.org/en-US/...plate_literals

[NoSmoking]

Le lien n'existe pas en Français

la page existe, testée avant d'envoyer la réponse, mais il semblerait que MDN ait des soucis avec ses pages traduites, donc le plus fiables est donc les pages en-US.

Sinon à voir également : https://fr.javascript.info/string

[nouby]

Oui MDN a des problemes avec les pages en français en tous cas, j'ai pas vu les autres, mais je suis déjà allé voir la page anglaise, ça marche.
Merci pour les liens !!!