I'm writing a browser extension (next episode button for a video player) and the button I added using pure JS does not have the onclick function declared. onmouseover and on mouseout work fine.

Code snippet for issue

Output from browser logs

Button does not have trigger

Thanks for any help that can be provided.

edit: Here is the code as text (someone suggested it)

function next(){
    var url_arr = window.location.pathname.split("/");
    var match = url_arr[3].match(/[0-9]+$/)[0];
    var new_num = (1+parseInt(url_arr[3].match(/[1-9]+$/))).toString();
    while (new_num.length < match.length)
        {
            new_num = "0" + new_num;
         }
     var new_location = window.location.href.replace(/[0-9]+$/,new_num);
     window.location.href = new_location
}

console.log(document.getElementsByClassName('control-bar_container'));
console.log(document.getElementsByClassName('control-bar_container').item(0));
var vid_bar = document.getElementsByClassName('control-bar_container')[0];
var btn = document.createElement('button');
console.log(vid_bar);
console.log(btn);
var next_button = vid_bar.appendChild(btn);
next_button.id = "next-button";
next_button.onclick = next;
console.log(next);
console.log(next_button.onclick);