2
votes

Ajouter une classe à un élément à l'aide de event.currentTarget.className

J'ai un bouton avec un fond jaune, en cliquant sur le bouton, je voudrais qu'il devienne noir ( https : //jsfiddle.net/dcq5v6hy/1/ ). J'essaie de le faire avec une fonction js et une classe css button.active (je n'ai jamais vu .active , mais j'essaie de suivre un tutoriel W3Schools).

<div class="tab">
  <button onclick="changeColor(event)">Click Me</button>
</div>

.tab button {
  background-color: yellow;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: red;
}

function changeColor(evt) {
  evt.currentTarget.className += "active";
}

Comme vous pouvez le voir, rien ne se passe lorsque le bouton est cliqué. Comment puis-je résoudre ce problème?

javascript dom-events

1 commentaires

J'ai créé un extrait de votre code et cela fonctionne un peu. Le problème sur JSFiddler est que votre changeColor n'est pas accessible à partir du script en ligne. Cela dépend de la façon dont JSFiddler est configuré.

4 Réponses :

2
votes

Essayez d'ajouter un espace dans la chaîne ajoutée: evt.currentTarget.className + = "active";

0 commentaires

1
votes

J'ai remarqué deux problèmes différents ici:

1) classNames doit être joint avec des espaces, donc ajoutez un espace avant active

document.querySelector('button').addEventListener('click', changeColor);

2) La fonction changeColor ne peut pas être trouvé à partir du DOM. Ceci principalement parce que votre fonction est déclarée sous le code HTML du bouton. Vous pouvez le définir global en utilisant window.changeColor = ou en modifiant l'ordre, mais je recommanderais d'utiliser addEventListener pour ajouter la fonction en tant qu'écouteur. Lorsque vous utilisez cette méthode, vous pouvez supprimer l'attribut onclick = "" du DOM.

evt.currentTarget.className += " active";

1 commentaires

J'ai mis à jour votre violon avec ces deux changements et cela semble fonctionner: jsfiddle.net/6yhrx8ap

0
votes

Il n'y a rien de mal avec votre code. Le problème que vous avez est que la fonction n'était pas chargée dans votre jsfiddle. Lorsque vous avez cliqué sur le bouton, vous n’avez pas pu appeler votre fonction.

Si vous cliquez sur l'en-tête du panneau Javascript et que vous le changez en Type de chargement en Pas d'enroulement - en bas de la tête , vous constaterez que cela fonctionne comme vous le souhaitez.

0 commentaires

2
votes

N'utilisez pas les attributs onevent:

<div class="tab">
  <button>Click Me</button>
</div>

Utilisez les propriétés onevent ou .addEventListener()

.tab button {
  background-color: yellow;
}

.tab button.active {
  background-color: red;
}

event.currentTarget pointe vers la balise inscrite à l'événement. event.target pointe vers la balise sur laquelle on a cliqué, modifié, survolé, etc ... En OP, c'est une seule et même chose.

On ne sait pas quel est le problème, sauf qu'il n'est pas très utile d'être coincé dans un état. Peut-être vouliez-vous que le bouton alterne entre les deux couleurs?

function changeColor(evt) {
  evt.target.classList.toggle("active");
}

document.querySelector('button').onclick = changeColor;

 evt.target.classList.toggle("active");

 document.querySelector('button').onclick = notLame;

 document.querySelector('button').addEventListener('click', notLame)

 <button onclick="lame()">...

1 commentaires

J'ai fini par n'avoir qu'à ajouter un espace à la chaîne "active" pour que mon exemple spécifique fonctionne. Cependant, j'ai appris beaucoup plus que ce à quoi je m'attendais de cette réponse, merci.