0
votes

Pourquoi ma fonction ne s'exécute-t-elle qu'une seule fois sur l'événement onClick dans le bouton?

J'ai cherché, mais je n'ai pas trouvé de solution à mon problème. Je ne suis pas un expert JS, juste un novice, mais je ne comprends pas pourquoi cela ne fonctionne qu'une seule fois. J'ai une liste déroulante SELECT et je voulais exécuter différentes instructions sur différentes options sélectionnées.

J'ai 4 blocs de texte html, un seul est visible (affichage: bloc), les autres sont cachés (affichage: aucun). Ce que je veux réaliser ici est de n'afficher que le bloc sélectionné et de masquer les autres, lorsque je clique sur le bouton.

Voici le code que j'ai:

<select id="dynamic_select">
  <option value="opt1">Display html block 1</option>
  <option value="opt2">Display html block 2</option>
  <option value="opt3">Display html block 3</option>
  <option value="opt4">Display html block 4</option>
</select>

<button onClick="filter()">Filter</button>

function filter() {
  if (document.getElementById('dynamic_select').value == 'opt1') {
    document.getElementById('html_block_1').style.display = 'block';
    document.getElementById('html_block_2').style.display = 'none';
    document.getElementById('html_block_3').style.display = 'none';
    document.getElementById('html_block_4').style.display = 'none';
  }
  if (document.getElementById('dynamic_select').value == 'opt2') {
    document.getElementById('html_block_2').style.display = 'block';
    document.getElementById('html_block_1').style.display = 'none';
    document.getElementById('html_block_3').style.display = 'none';
    document.getElementById('html_block_4').style.display = 'none';
  }
  if (document.getElementById('dynamic_select').value == 'opt3') {
    document.getElementById('html_block_3').style.display = 'block';
    document.getElementById('html_block_1').style.display = 'none';
    document.getElementById('html_block_2').style.display = 'none';
    document.getElementById('html_block_4').style.display = 'none';
  }
if (document.getElementById('dynamic_select').value == 'opt4') {
  document.getElementById('html_block_4').style.display = 'block';
  document.getElementById('html_block_1').style.display = 'none';
  document.getElementById('html_block_2').style.display = 'none';
  document.getElementById('html_block_3').style.display = 'none';
}
}

Lorsque je sélectionne l'une des options et clique sur le bouton, cela fonctionne comme prévu. Mais lorsque je sélectionne une autre option et clique sur le bouton pour la deuxième fois, cela ne fait rien. La fonction ne s'exécute qu'une seule fois.

Y a-t-il un moyen simple de résoudre ce problème?

javascript function if-statement onclick

6 commentaires

if (document.getElementById ('dynamic_select'). value == 'opt4') {... est placé en dehors de votre fonction filter

Votre code génère des erreurs dans la console. Il existe un } incomparable

Désolé, c'était une faute de frappe. Un de trop. Mais dans le code d'origine, ce n'est pas le problème et cela ne fonctionne toujours pas.

Veuillez également ajouter le bloc html.

Sans que la faute de frappe ne fonctionne pour moi, vérifiez ce JSFiddle

Guillermo, tu as raison, ça marche dans ton JSFiddle. Mais sur la page d'origine, ces blocs HTML sont des listes de catégories wordpress, composées dans WP Bakery en tant qu'éléments, et ces éléments ont les ID.

4 Réponses :

0
votes

Le code fonctionne comme prévu. Essaye ça. J'ai créé des blocs avec les identifiants donnés. Nous pouvons toujours optimiser cela.

function filter() {
if (document.getElementById('dynamic_select').value == 'opt1'){
   document.getElementById('html_block_1').style.display = 'block';
   document.getElementById('html_block_2').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
else if (document.getElementById('dynamic_select').value == 'opt2'){
   document.getElementById('html_block_2').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
else if (document.getElementById('dynamic_select').value == 'opt3'){
   document.getElementById('html_block_3').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
 else {
   document.getElementById('html_block_4').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_3').style.display = 'none';
   }
}
</script>

0 commentaires

0
votes

Cela devrait fonctionner. Il y a autre chose qui empêche votre événement de se produire. Si votre fonction de filtre est dans un fichier js personnalisé, déplacez la fonction dans votre fichier HTML lui-même où vous avez votre code HTML déroulant. Ensuite, essayez de l'exécuter. Mettez également cette console juste après l'ouverture de votre fonction de filtrage

console.log(document.getElementById('dynamic_select').value)

Vérifiez également cette erreur dans la console -> Impossible de lire la propriété 'style' de null. On dirait que votre élément "html_block_index" n'est pas présent dans le DOM.

3 commentaires

J'ai ajouté le console.log et c'est fou. Lorsque je sélectionne opt1, cela fonctionne et la console affiche opt1, mais ensuite, lorsque je sélectionne une autre option et clique sur le bouton, la console continue d'afficher opt1, peu importe ce que je choisis.

Etes-vous sûr que les valeurs de la sélection sont en fait "opt1" .. "opt4"? S'ils étaient tous "opt1" (copier-coller peut-être), cela montrerait le comportement décrit.

Non, ce n'est pas le cas. Toutes les options ont des valeurs différentes.

1
votes

Pas tout à fait lié au problème en question, mais si vous modifiez les valeurs de la zone de liste entre 1 et 4, vous pouvez simplifier votre fonction de filtrage comme

function filter()
{
    let value = document.getElementById('dynamic_select').value;

    for (i = 1; i < 5; i++)
    {
        let id      = 'html_block_' + i;
        let display = i == value ? 'block' : 'none';
        document.getElementById( id ).style.display = display;
    }
}

0 commentaires

0
votes

Voici l'extrait de code mis à jour: Veuillez vérifier ce qui suit, cela fonctionne comme prévu

<select id="dynamic_select">
  <option value="opt1">Display html block 1</option>
  <option value="opt2">Display html block 2</option>
  <option value="opt3">Display html block 3</option>
  <option value="opt4">Display html block 4</option>
</select>

<button onClick="filter()">Filter</button>
<div id="html_block_1">Block 1</div>
<div id="html_block_2">Block 2</div>
<div id="html_block_3">Block 3</div>
<div id="html_block_4">Block 4</div>

function filter() {
  if (document.getElementById('dynamic_select').value == 'opt1') {
    document.getElementById('html_block_1').style.display = 'block';
    document.getElementById('html_block_2').style.display = 'none';
    document.getElementById('html_block_3').style.display = 'none';
    document.getElementById('html_block_4').style.display = 'none';
  }
  if (document.getElementById('dynamic_select').value == 'opt2') {
    document.getElementById('html_block_2').style.display = 'block';
    document.getElementById('html_block_1').style.display = 'none';
    document.getElementById('html_block_3').style.display = 'none';
    document.getElementById('html_block_4').style.display = 'none';
  }
  if (document.getElementById('dynamic_select').value == 'opt3') {
    document.getElementById('html_block_3').style.display = 'block';
    document.getElementById('html_block_1').style.display = 'none';
    document.getElementById('html_block_2').style.display = 'none';
    document.getElementById('html_block_4').style.display = 'none';
  }
if (document.getElementById('dynamic_select').value == 'opt4') {
  document.getElementById('html_block_4').style.display = 'block';
  document.getElementById('html_block_1').style.display = 'none';
  document.getElementById('html_block_2').style.display = 'none';
  document.getElementById('html_block_3').style.display = 'none';
}
}

0 commentaires