OnClick не будет работать с кнопкой ввода

Question

Это довольно прямо вперед:

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

Он не будет отображаться нажмите на консоли. Если я попытаюсь поместить его прямо во входной заголовок с помощью инструментов chrome dev, он выводит тексты, поэтому я знаю, что кнопка работает. Я просто не знаю, почему это не работает, когда я назначаю функцию с помощью 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

При использовании innerHTML содержимое элемента получает перегенерироваться. Элементы удаляются и воссоздаются, что, в свою очередь, удаляет событие . Гораздо лучше было бы использовать манипуляции с DOM.

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>