工作,這是非常簡單的:的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 –