function runs at browser reload.

[tapi0n]

I'm tinkering with css and javascript today but I've encountered a small problem.

Here's a snippet of my code:

var genres = new Array();
var genre1 = new Array();
var genre2 = new Array();
var genre3 = new Array();
    

window.onload = function(){
    var addButton = document.getElementById("addButton");
    addButton.onclick = handleAddButton;
    
    var genre1 = document.getElementById("genre1");
    genre1.onclick = showGenreValues("genre1");
    
}

function handleAddButton(){
    ...
}

function pushValues(songInfoString,songGenre){
    ...
}

function showGenreValues(genre){
    alert("Showing: " + genre);
} 

I left out the content of functions because they are not part of the problem.

the problem resides in

function showGenreValues(genre){
    alert("Showing: " + genre);
} 

this function should only be ran when pushing a subitem in a menu. Here's the snippet of the menu:

<nav>
 <ul>
   <li><a href="">Link1</a>
      <ul id="link1">
	 <li id="genre1"><a href="">Genre1</a></li>
	 <li id="genre2"><a href="">Genre2</a></li>
  	 <li id="genre3"><a href="">Genre3</a></li>
      </ul>
   </li>
   <li id="link2"><a href="">Link2</a></li>
   <li id="link3"><a href="">Link3</a></li>
   <li id="link4"><a href="">Link4</a></li>
   <li id="link5"><a href="">Link5</a></li>
 </ul>
</nav>

Now the showGenreValues function runs like it should when I press it in a browser. Problem is, when I hit reload I get the alert sent by the function as well, which I shouldn't.

Anyone who knows how this is possible?

Cheers.

[SparoHawk]

That is happening because you are passing an argument to the function.

Try it like this:

var genre1 = document.getElementById("genre1");
genre1.onclick = function(){showGenreValues("genre1")};

[tapi0n]

That is happening because you are passing an argument to the function.

Try it like this:

var genre1 = document.getElementById("genre1");
genre1.onclick = function(){showGenreValues("genre1")};

Worked like a charm, thank you!