Utiliser JavaScript pour récupérer les valeurs des données de mon code HTML et les imprimer sur la console

Question

Je ne sais pas ce qui ne va pas dans ce code, je l'ai recherché en ligne et tout ce que j'ai vu, c'est mettre window.onload = function() au début du code. Cependant, la valeur s'imprime toujours comme nulle et je ne comprends pas pourquoi cela se produit.

Voici le code :

window.onload = function () {
    // Get the select element by its id
    const select = document.getElementById("select-filter");

    // Get the selected option element
    const selectedOption = select.options[select.selectedIndex];

    // Get the data-select value
    const dataSelect = selectedOption.getAttribute("data-sel");

    // Print the data-select value to the console
    console.log(dataSelect);
}

<div class="filter-select-container">
  <!-- filter selector -->
  <div class="filter-selection-container">
    <select name="select-filter" id="select-filter">
      <option value="filter-all">All</option>
      <option value="filter-commercials" data-sel="1">Commercials</option>
      <option value="filter-fiction" data-sel="2">Fiction</option>
      <option value="filter-music-videos" data-sel="3">Music Videos</option>
    </select>
  </div>
</div>

Merci pour votre aide :)

Answer 1

Vous vouliez probablement dire select 有一个 change auditeur , puis vérifiez si la propriété data est définie avant d'essayer de vous connecter.

const select = document.getElementById("select-filter");

select.addEventListener('change', handleChange);

function handleChange() {
  const selectedOption = select.options[select.selectedIndex];
  const dataSelect = selectedOption.getAttribute("data-sel");
  if (dataSelect) console.log(dataSelect);
}

  
  

    
      All
      Commercials
      Fiction
      Music Videos