0
votes

Je ne peux pas apporter la div lorsque je clique sur le bouton plusieurs fois à l'aide de JavaScript

Lorsque vous cliquez sur l'icône de barre plus d'une fois forte>, vous ne pouvez pas apporter l'icône de la croix.

Lorsque vous cliquez sur l'icône de la barre, une icône Cross apparaît. Lorsque vous cliquez sur la nouvelle icône de la croix, l'icône de la barre apparaît. Jusqu'ici tout va bien. Mais lorsque vous cliquez à nouveau sur l'icône de la barre, rien ne se passe. P>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

  <div>
    <i class="fas fa-bars" id="bars-icon" style="flex-grow: 1;"></i>
  </div>

javascript html css button

0 commentaires

4 Réponses :

4
votes

Ce n'est pas la bonne façon de lier un événement. N'utilisez pas la liaison des événements dans des fonctions imbriquées. Ce n'est pas une bonne pratique

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>

  <div>
    <i class="fas fa-bars" id="icon" style="flex-grow: 1;"></i>
  </div>

0 commentaires

0
votes

Je ne jouerais pas avec les identifiants de vos éléments par exemple. Changer à l'exécution. Mieux vaut ajouter les deux éléments d'icônes au DOM Initialement et basculer leur visibliy à l'aide de la propriété afficheur forte>.

1 commentaires

Aucun problème Bhushanoff - content de pouvoir aider!

0
votes

Il n'est pas recommandé de modifier l'ID d'un élément DOM, en particulier pour celui que vous avez attaché un auditeur d'événements sur. Une solution serait d'utiliser deux icônes et d'afficher / masquer en fonction duquel est cliqué sur lequel est cliqué.

var barsIcon = document.getElementById("bars-icon");
var crossIcon = document.getElementById("cross-icon");


barsIcon.addEventListener("click", function() {
    barsIcon.style.display = 'none';
    crossIcon.style.display = 'block';

});

crossIcon.addEventListener("click", function() {
    crossIcon.style.display = 'none';
    barsIcon.style.display = 'block';
});

0 commentaires

0
votes

Je suggérerais de garder votre état actuel sur votre TAG NODE dans l'attribut personnalisé Data -TR fort> au lieu de créer une variable JavaScript forte>.

Lire l'état actuel de HTML nœud et fonctionner en conséquence. p>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<div>
    <i class="fas fa-bars" data-attr="bars" id="bars-icon" style="flex-grow: 1;"></i>
  </div>

1 commentaires

Merci, @growYour Gk!