onclick won't work with a button input

Question

This is pretty straight forward:

    var previous = document.createElement("input");
    previous.type = "button";
    previous.value = "<-";
    previous.className = "leftBtn";
    previous.onclick = function(){
        console.log("CLICK");
    };

It won't display click in console. If I try to put it directly in the input header with chrome dev tools, it outputs texts so I know the button works. I just have no idea why it doesn't work when I assign the function with javascript.

EDIT:

 function createCalandar(id, year, month){ var date = new Date(year, month, 0); var daysInMonth = date.getDate(); console.log(id+" "+year+" "+month); var size = Math.sqrt(daysInMonth); var currentDay = 1; var header = document.createElement("div"); header.className = "staticHeader"; var previous = document.createElement("input"); previous.type = "button"; previous.value = "<-"; previous.className = "leftBtn"; previous.onclick = function(){ console.log("CLICK"); }; var next = document.createElement("input"); next.type = "button"; next.value = "->"; next.className = "rightBtn"; header.appendChild(previous); header.appendChild(next); var table = document.createElement("table"); table.className = "calandar"; for(var x=0; x < size; x++){ var row = document.createElement("tr"); for(var y=0; y < size; y++){ var col = document.createElement("td"); row.appendChild(col); if(currentDay <= daysInMonth){ col.innerHTML = currentDay; col.onclick = function(e){ console.log(currentDay); } } currentDay++; } table.appendChild(row) } var htmlLocation = document.getElementById(id); htmlLocation.innerHTML = header.outerHTML+"<br />"+table.outerHTML; } function createCalandarNow(id){ var date = new Date(); createCalandar(id, date.getYear(), date.getMonth()); } function nextCalandar(){ } function lastCalandar(){ } createCalandarNow("calandar"); 

 html,body{ margin:0; padding:0; } #calandar{ position:absolute; right:10; bottom:20; width:200; height:200; } #calandar input{ width:50%; cursor:pointer; } #calandar .leftBtn{ position:absolute; left:0; } #calandar .rightBtn{ position: absolute; right:0; } .calandar{ border:1px solid gray; width:100%; height:100%; text-align: center; } .calandar td{ border:1px solid white; } .calandar td:hover{ background-color:lightgray; cursor:pointer; } .calandar .staticHeader{ position:static; } 

 <title>Scheduler</title> <div id="content"> <div id="calandar"> </div> </div> 

Answer 1

When you use innerHTML the element's content gets reparsed. The elements are removed and recreated, which in turn removes the event handler. Much better would be to use DOM manipulation.

 function createCalandar(id, year, month) { var date = new Date(year, month, 0); var daysInMonth = date.getDate(); console.log(id + " " + year + " " + month); var size = Math.sqrt(daysInMonth); var currentDay = 1; var header = document.createElement("div"); header.className = "staticHeader"; var previous = document.createElement("input"); previous.type = "button"; previous.value = "<-"; previous.className = "leftBtn"; previous.addEventListener("click", function() { console.log("CLICK"); }); var next = document.createElement("input"); next.type = "button"; next.value = "->"; next.className = "rightBtn"; header.appendChild(previous); header.appendChild(next); var table = document.createElement("table"); table.className = "calandar"; for (var x = 0; x < size; x++) { var row = document.createElement("tr"); for (var y = 0; y < size; y++) { var col = document.createElement("td"); row.appendChild(col); if (currentDay <= daysInMonth) { col.innerHTML = currentDay; col.onclick = function(e) { console.log(currentDay); } } currentDay++; } table.appendChild(row) } var htmlLocation = document.getElementById(id); //htmlLocation.innerHTML = header.outerHTML+"<br />"+table.outerHTML; htmlLocation.appendChild(header); htmlLocation.appendChild(document.createElement("br")); htmlLocation.appendChild(table); } function createCalandarNow(id) { var date = new Date(); createCalandar(id, date.getYear(), date.getMonth()); } function nextCalandar() { } function lastCalandar() { } createCalandarNow("calandar"); 

 html, body { margin: 0; padding: 0; } #calandar { position: absolute; right: 10; bottom: 20; width: 200; height: 200; } #calandar input { width: 50%; cursor: pointer; } #calandar .leftBtn { position: absolute; left: 0; } #calandar .rightBtn { position: absolute; right: 0; } .calandar { border: 1px solid gray; width: 100%; height: 100%; text-align: center; } .calandar td { border: 1px solid white; } .calandar td:hover { background-color: lightgray; cursor: pointer; } .calandar .staticHeader { position: static; } 

 <title>Scheduler</title> <div id="content"> <div id="calandar"> </div> </div>