onclick无法使用按钮输入

Question

这很简单：

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

它不会在控制台中显示点击。如果我尝试使用chrome dev工具将其直接放在输入标题中，它会输出文本，因此我知道按钮有效。我只是不知道为什么当我用javascript分配函数时它不起作用。

编辑：

＆＃13;

＆＃13;

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");

＆＃13;

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;
}

＆＃13;

<title>Scheduler</title>


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

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

当您使用innerHTML时，元素的内容会被重新分析。该   删除并重新创建元素，从而删除事件   处理程序。更好的方法是使用DOM操作。

＆＃13;

＆＃13;

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");

＆＃13;

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;
}

＆＃13;

<title>Scheduler</title>


<div id="content">
  <div id="calandar">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;