4
工作，这是非常简单的：的onclick不会按钮输入
var previous = document.createElement("input");
previous.type = "button";
previous.value = "<-";
previous.className = "leftBtn";
previous.onclick = function(){
console.log("CLICK");
};
它不会显示单击控制台。如果我尝试使用chrome开发工具直接将其放入输入标题，则会输出文本，以便我知道按钮的工作原理。我只是不知道为什么它不起作用，当我用javascript分配函数。
编辑：
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>
告诉你这里有什么不实际添加的输入要素_previous_到DOM，这样就不会甚至是任何点击。你需要展示更多的内容/上下文。也许你可以创建一个SO [snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/） –
你可以参考这个链接： http ：//stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript – Vijai
关于附加事件监听器也很好，以防你不知道它们：http：/ /stackoverflow.com/questions/6348494/addeventlistener-vs-onclick –