Verwenden von JavaScript, um Datenwerte aus meinem HTML abzurufen und sie auf der Konsole auszudrucken

Question

Ich weiß nicht, was dieser Code falsch macht. Ich habe online nachgeschaut und alles, was ich gesehen habe, war, window.onload = function() an den Anfang des Codes zu setzen. Allerdings wird der Wert immer als Null ausgegeben und ich kann nicht verstehen, warum das so ist.

Das ist der 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>

Danke für deine Hilfe :)

Answer 1

您可能意味着 select 有一个 change 侦听器 ，然后在尝试记录之前检查数据属性是否已定义。

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