CODEWITHSUNDEEP
javascripteventsclickload
miganml
miganml

Reputation: 47

element.onclick event after window load not working in javascript

I need help. I want elements to be shown when clicking on their siblings. I want to do this stuff with pure javascript.

When I run my code and I click on the neither nothing happens nor errors are shown in the browser console (Chrome and Firefox).

I think one problem could be the onclick event inside de window.onload function, but I don't find the way to fix it.

Here's my HTML code:

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

And here's my JavaScript code:

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

Your answers telling me the code worked, gave me the key of the problem: another file js was executing a window.onload function so this one didn't work. This has been fixed by using.

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

Thanks.

Upvotes: 1

Views: 1618

Answers (2)

Zivko
Zivko

Reputation: 377

Hm I try your example and it work fine in chroma. I just add CSS that should work for this purpose.

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

Upvotes: 0

Sze-Hung Daniel Tsui
Sze-Hung Daniel Tsui

Reputation: 2332

Are you running your javascript correctly? I pasted everything into a html file, and the click seems to work. It adds and removes the hide_months class. I don't have your css to make Marzo/Mayo dissapear, but looks like the loading and clicking are working as expected.

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

Upvotes: 1

Related Questions