Is there a way to make the onclick event function in javascript without including the onclick in html code?

Question

I'm quite a beginner so apology for my question if it's dumb.

I have an unordered list and a button in HTML and I want to make the button show or hide the list via javascript, but I am trying to avoid giving the onclick attribute to the button in the HTML code.

var btn = document.getElementById("button");

btn.onclick = function(){
    
    var ul = document.getElementById("ul");
    if(ul.style.display=='none'){
        ul.style.display='block'}
        else{ul.style.display='none'}  
}

<ul id=ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

What am I missing here, can't make it work? Could only do it when I included the onclick attribute in HTML and made a showhide() function for its onclick event, but that seems impractical in the long run.

Your code seems to work fine when I run it. Do you see any errors in your browers console? — Nick Parsons, Oct 12 '20 at 13:13
javascript.js:3 Uncaught TypeError: Cannot set property 'onclick' of null at javascript.js:3 This is the error i get when checking the browser console. — Vatai Domonkos, Oct 12 '20 at 13:16
Did you load your script in the `` of your page? You're most likely running the JavaScript code before the HTML (ie: DOM) has loaded, so you can't access the elements on the page yet. You need to run your JavaScript code _after_ the page has loaded. This can be done by placing your script before the closing `` tag (see more ways in the duplicate link above) — Nick Parsons, Oct 12 '20 at 13:18
Yeah, you can move that before `
` in your HTML, that way your script will run once all the elements have loaded, allowing your script to access them — Nick Parsons, Oct 12 '20 at 13:21

score 4 · Answer 1 · answered Oct 12 '20 at 13:13

Yes, you use addEventListener

var btn = document.getElementById("button");

btn.addEventListener('click',function(){
    
    var ul = document.getElementById("ul");
    if(ul.style.display=='none') ul.style.display='block'
    else ul.style.display='none'  
});

<ul id="ul">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

score 0 · Accepted Answer · answered Oct 12 '20 at 13:14

You can define event handler using addEventListener on JavaScript.

var btn = document.getElementById("button");
btn.addEventListener('click', function(){
    var ul = document.getElementById("ul");
    if(ul.style.display=='none'){
        ul.style.display='block'}
        else{ul.style.display='none'}  
});

<ul id="ul">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

Is there a way to make the onclick event function in javascript without including the onclick in html code?

2 Answers2