窗口加载后的element.onclick事件在javascript中不起作用答案

【问题标题】：element.onclick event after window load not working in javascript窗口加载后的element.onclick事件在javascript中不起作用
【发布时间】：2015-03-23 20:09:55
【问题描述】：

我需要帮助。我希望在单击其兄弟姐妹时显示元素。我想用纯 javascript 来做这些事情。

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

我认为一个问题可能是 de 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);

谢谢。

【问题讨论】：

会发生什么？您是否尝试过 console.log() 来查看是否触发了事件？
试试几年[i]..addEventListner("click")

标签： javascript events click load

【解决方案1】：

您的 javascript 运行是否正确？我将所有内容都粘贴到一个 html 文件中，并且单击似乎有效。它添加和删除 hide_months 类。我没有让 Marzo/Mayo 消失的 CSS，但看起来加载和点击工作正常。

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

【讨论】：

【解决方案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>

【讨论】：