从我的 HTML 中检索数据*值并使用 Javascript 将其打印到控制台答案

【问题标题】：Retrieving the data* value from my HTML and printing it into the console using Javascript从我的 HTML 中检索数据*值并使用 Javascript 将其打印到控制台
【发布时间】：2023-01-25 23:23:11
【问题描述】：

我不知道我在这段代码中做错了什么，我在网上看了看，我所看到的只是把 window.onload = function() 放在代码的开头。但是，该值始终打印为 null，我无法理解为什么要这样做。

这是 HTML：

<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>

这是JS：

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);
}

谢谢你的帮助：）

【问题讨论】：

标签： javascript html css

【解决方案1】：

您提供的代码看起来正确并且应该按预期工作。问题可能是脚本在 DOM 完全加载之前运行。

您可以尝试将脚本标签移动到 HTML 文件的底部，恰好在结束 body 标签之前，以确保在脚本运行之前 DOM 已完全加载。

另一种解决方案是使用DOM 内容已加载事件而不是加载事件，DOM 内容已加载当初始 HTML 文档已完全加载和解析时，事件将触发，无需等待样式表、图像和子框架完成加载。

document.addEventListener("DOMContentLoaded", 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);
});

此外，您可以检查您的脚本标签是否位于结束 body 标签之前，还可以检查浏览器的开发者控制台是否有任何错误。

【讨论】：

【解决方案2】：

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

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);
}

<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>

【讨论】：