2016-08-02 72 views
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>

+0

告訴你這裏有什麼不實際添加的輸入要素_previous_到DOM,這樣就不會甚至是任何點擊。你需要展示更多的內容/上下文。也許你可以創建一個SO [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) –

+0

你可以參考這個鏈接: http ://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript – Vijai

+1

關於附加事件監聽器也很好,以防你不知道它們:http:/ /stackoverflow.com/questions/6348494/addeventlistener-vs-onclick –

回答

5

當您使用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>

+0

它已經在dom中。正如我在發佈後所說的,我可以使用chrome工具查看它,並手動添加一個可以正常工作的onclick。 – WinterDev

+0

不,那麼我們可能會錯過一些東西,你可以創建一個片段或一個簡約的代碼複製的情況下的小提琴。 – Ayan

+0

@Aryan新增了一個完整的片段。我測試了onclick =和addEventListener – WinterDev