J'ai une collection de cases à cocher que j'ai obtenues de Bootstrap qui apparaissent plus en tant que boutons que des cases à cocher, mais leur statut vérifié bascule toujours sur les clics. J'ai une entrée de texte sur le formulaire permettant à l'utilisateur d'ajouter des cases à cocher avec des étiquettes et des valeurs correspondant à l'entrée de l'utilisateur. Toutes les cases à cocher sont dans le même composant div.

J'utilise JavaScript pour créer de manière dynamique la nouvelle case à cocher et l'ajouter à un label, qui est annexé au div contenant les cases. La nouvelle case à cocher apparaît sur la page, mais sans le style, qui est lié dans la tête du document HTML. Comment puis-je appliquer le style à la nouvelle case à cocher?

Voici le JavaScript que j'utilise:

function addRestriction() {
                let userInput = document.getElementById("add_other").value; // get user input
                let newBox = document.createElement("input");
                newBox.type = "checkbox";
                newBox.autocomplete = 'off';
                newBox.name = 'diet_button';
                newBox.value = userInput;
                let newLabel = document.createElement("label");
                newLabel.class = "btn btn-outline-secondary active";
                newLabel.appendChild(newBox);
                newLabel.appendChild(document.createTextNode(userInput));
                document.getElementById('diet_restrictions').appendChild(newLabel);
                document.getElementById('add_other').value = '';
            }
0
Owen Glahn 3 juin 2021 à 00:46

1 réponse

Meilleure réponse

Les deux réponses sont correctes:

element.className = "new-class"

Sera définir cet élément uniquement le nom de la classe sur "New-Class" pendant:

element.classList.add("new-class")

Ajoutera une nouvelle classe à un ensemble de classes déjà existant. Cette fonctionnalité peut être utile au cas où vous allez élargir davantage les cours dans vos cases à cocher nouvellement créées.

Ce violon montre les différences.

  1. .ClassName Ref
  2. .ClassList Ref
1
Marelons 2 juin 2021 à 23:17