Javascript eventlisteners override other buttons? -

i've run problem using eventlisteners , javascript (though onclick seems have same effect).

i have in html

 <input id="srch" type="button" value="zoek gebruikers!"  onclick="searchbutton()"> 

now, worked fine , executes expected javascript code. but, when add in javascript function

var addbutton = document.createelement("input"); addbutton.setattribute("id","openaddmenu"); addbutton.type = "button"; addbutton.value = "search"; addbutton.innerhtml = "zoek"; addbutton.addeventlistener('click',searchfriendsasync(),false); 

now initial button wil try execute 'searchfriendasync()' well.

i'm quite inexperienced javascript, i'm sure it's basic i'm missing. yet search results on google find answers regarding adding 1 event multiple buttons etc, .. opposite of want. need multiple buttons different events - buttons generated using javascript. (note, when add eventlistener third button, both first , second button mess up).

one problem here:

addbutton.addeventlistener( 'click', searchfriendsasync(), false ); 

i assume searchfriendsasync function defined in code wish call when addbutton clicked, right?

that's not code does. calls searchfriendsasync immediately (because of parentheses) , passes return value addeventlistener, doesn't good. remove parentheses pass reference function instead of calling it:

addbutton.addeventlistener( 'click', searchfriendsasync, false );