element.onclick window 加载后的事件在 javascript 中不工作

Question

我需要帮助。我希望在单击其兄弟姐妹时显示元素。我想用纯 javascript.

来做这些事情

当我运行我的代码和我点击浏览器控制台（Chrome 和 Firefox）时，既没有任何反应也没有显示错误。

我认为一个问题可能是 window.onload 函数中的 onclick 事件，但我找不到解决它的方法。

这是我的 HTML 代码：

<div class="year_element">
  <h3 class="year">2015</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=2015+Marzo">Marzo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1998</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=1998+Mayo">Mayo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1987</h3>
  <ul class="hide_months months">
  </ul>
</div>

这是我的 JavaScript 代码：

window.onload = function() {
  var years = document.getElementsByClassName('year');
  //When doing click on a year, show months
  for (var i = 0; i < years.length; i += 1) {
    //Function needs event as parameter to work
    years[i].onclick = function(event) {
      var selectedYear = event.target;
      var month_list = selectedYear.nextSibling.nextSibling;
      //Showing months
      if (month_list.classList.contains('hide_months')) {
        month_list.classList.remove('hide_months');
        //Hiding months
      } else {
        month_list.classList.add('hide_months');
      }
    };
  };
}

你的回答告诉我代码有效，给了我问题的关键：另一个文件 js 正在执行一个 window.onload 函数，所以这个函数不起作用。这已通过使用修复。

window.addEventListener("load", one_function, false);
window.addEventListener("load", another_function, false);

谢谢。

Answer 1

你运行你的 javascript 正确吗？我将所有内容粘贴到 html 文件中，点击似乎有效。它添加和删除 hide_months class。我没有你的 css 来使 Marzo/Mayo 消失，但看起来加载和点击工作正常。

<script type="text/javascript">
window.onload = function() {
  var years = document.getElementsByClassName('year');
  //When doing click on a year, show months
  for (var i = 0; i < years.length; i += 1) {
    console.log('found some elements');
    //Function needs event as parameter to work
    years[i].onclick = function(event) {
      var selectedYear = event.target;
      var month_list = selectedYear.nextSibling.nextSibling;
      //Showing months
      if (month_list.classList.contains('hide_months')) {
        month_list.classList.remove('hide_months');
        //Hiding months
      } else {
        month_list.classList.add('hide_months');
      }
    };
  };
}
</script>

Answer 2

嗯，我试过你的例子，它在色度上运行良好。我只是添加了应该用于此目的的 CSS。

<html>
<body>
<div class="year_element">
  <h3 class="year">2015</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=2015+Marzo">Marzo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1998</h3>
  <ul class="hide_months months">
    <li><a href="/month_results?query=1998+Mayo">Mayo</a>
    </li>
  </ul>
</div>
<div class="year_element">
  <h3 class="year">1987</h3>
  <ul class="hide_months months">
  </ul>
</div>
<script>
 window.onload = function() {
 var years = document.getElementsByClassName('year');
 //When doing click on a year, show months
 for (var i = 0; i < years.length; i++) {
  //Function needs event as parameter to work
  years[i].onclick = function(event) {
  var selectedYear = event.target;
  var month_list = selectedYear.nextSibling.nextSibling;
  //Showing months
  if (month_list.classList.contains('hide_months')) {
   month_list.classList.remove('hide_months');
   //Hiding months
  } else {
   month_list.classList.add('hide_months');
  }
  };
 };
 }
</script>
<style>
 .year_element{font-weight: normal;}
 .year{font-weight: bold; cursor: pointer;}
 .months{color: green;}
 .hide_months{display: none;}
</style>
</body>
</html>

element.onclick window 加载后的事件在 javascript 中不工作

element.onclick event after window load not working in javascript

javascript

events

click

load