Onclick will not work with the click of a button

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 will not be displayed in the console. If I try to put it directly in the input header using the chrome dev tools, it outputs the texts, so I know that the button works. I just don't know why this is not working when I assign a function using 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>

Run codeHide result

Answer 1

When you use innerHTML, the content of the element gets repaired. items are deleted 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>

Run codeHide result