Menggunakan JavaScript untuk mendapatkan semula nilai data daripada HTML saya dan mencetaknya ke konsol

Question

Saya tidak tahu apa yang salah kod ini, saya mencarinya dalam talian dan yang saya lihat hanyalah meletakkan window.onload = function() pada permulaan kod. Walau bagaimanapun, nilai sentiasa dicetak sebagai nol dan saya tidak dapat memahami mengapa ia melakukan ini.

Ini kodnya:

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>

Terima kasih atas bantuan anda :)

Answer 1

Anda mungkin maksudkan select 有一个 change pendengar dan kemudian semak sama ada sifat data ditakrifkan sebelum cuba log.

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