Set onclick from JS

Question

I try to add some html code (from JS) in some variable, after I need change style and set onclick method this element.

var sideBar = document.createElement('div');
sideBar.setAttribute("class", "sidenav");
sideBar.setAttribute("id", "mySidenav");

sideBar.innerHTML = `<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>`;

sideBar.innerHTML += `<span onclick="openNav()">pen</span>`;

function openNav() {
    sideBar.style.width = "250px";
}

function closeNav() {
    sideBar.style.width = "0px";
}

But JS always says that openNav() and closeNav() are undefined. And I know that I can write html code in *.html, but in this case I need add html code from JS.

Answer 1

I had a specific task, since I tried to make extension for Google Chrome. The addEventListener(...) solved the problem.

    var btn = document.createElement('a');
    btn.setAttribute("id", "btn_1");
    btn.setAttribute("class", "ui_rmenu");
    btn.textContent = "Open";

    btn.addEventListener("click", openNav);

    function openNav(){...}