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>

What you show here doesn't actually add the input element _previous_ to the DOM, so there wouldn't even be anything to click on. You'll need to show more content / context. Perhaps you could create a SO [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — Stephen P, Aug 02 '16 at 00:19
You can refer this link: http://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript — Vijai, Aug 02 '16 at 00:21
It's also good to know about attaching event listeners, in case you're not aware of them: http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — sk29910, Aug 02 '16 at 00:23
@StephenP I attach it using appendChild on another element. I see it when I open the page and if I modify the onclick manually using chrome dev tools, it works. So the button is clickable. — WinterDev, Aug 02 '16 at 00:23
That's what I'm saying WinterDev — show what you just described as part of your question. — Stephen P, Aug 02 '16 at 00:25
Can you please show your effort? If you see this bin, onClick already works perfectly http://jsbin.com/pupugihigu/edit?js,console,output — Bikas, Aug 02 '16 at 00:26
@BikasVaibhav Ya, I added a snippet. Hard to isolate the code more then that without adding the entire project. — WinterDev, Aug 02 '16 at 00:30
Save you self headache now and in the future and add your event listeners to static parents instead of dynamic elements to avoid issues like this. — Yasin Yaqoobi, Aug 02 '16 at 00:52

Ayan · Accepted Answer · 2016-08-02T00:40:55.200

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>

It is already in the dom. As I said int he post, I can view it with the chrome tools and manually add an onclick to it which works. — WinterDev, Aug 02 '16 at 00:22
No then might be we are missing something, can you just create a snippet or a fiddle with a minimalistic code to replicate the situation. — Ayan, Aug 02 '16 at 00:24
@Aryan Added a complete snippet. I tested with both onclick= and addEventListener — WinterDev, Aug 02 '16 at 00:29
@WinterDev I have commented a line and used appendChild instead. Please validate. — Ayan, Aug 02 '16 at 00:42

onclick won't work with a button input

1 Answers1