問題使用Javascript刷新div

我正試圖編寫一些代碼，點擊一個按鈕後，將填充一個div，如下面的代碼所示。問題是，我想確保如果按鈕被多次點擊，div可以重新加載。我嘗試使用下面的refreshDiv函數來實現這一點，但是這包括點擊按鈕的操作什麼也不做。問題使用Javascript刷新div

function buttonClickHandler() { 

    var divString = "foodJournal"; 
    refreshDiv(divString); 

    var divID = document.getElementById("foodJournal"); 
    var fieldset = document.createElement("fieldset"); 
    var legend = document.createElement("legend"); 
    legend.innerHTML = "Food Log"; 
    legend.setAttribute('id', "legend"); 
    divID.appendChild(fieldset); 
    fieldset.appendChild(legend); 

    //refreshes food journal div 
    var refreshDiv = function(element) { 
     node = document.getElementById(element); 
     while (node.hasChildNodes()) { 
      node.removeChild(node.lastChild); 
     } 
    }; 
}

任何幫助表示讚賞！

來源

2013-08-29 i_trope

您是否嘗試過調試此代碼？它是否到達'refreshDiv（）'方法？ –

您可以請創建一個[jsfiddle]（http://jsfiddle.net）與您的html和js包括在內。 –

如果您的項目可能，我也建議像jQuery一樣的JavaScript庫。所有這些都可以用幾行代替。 –

在實際聲明變量之前，您正在致電refreshDiv。將變量聲明移到調用上方，它應該可以工作。

function buttonClickHandler() { 

    var divString = "foodJournal"; 
    //refreshes food journal div 
    var refreshDiv = function(element) { 
     node = document.getElementById(element); 
     while (node.hasChildNodes()) { 
      node.removeChild(node.lastChild); 
     } 
    }; 

    refreshDiv(divString); 

    var divID = document.getElementById("foodJournal"); 
    var fieldset = document.createElement("fieldset"); 
    var legend = document.createElement("legend"); 
    legend.innerHTML = "Food Log"; 
    legend.setAttribute('id', "legend"); 
    divID.appendChild(fieldset); 
    fieldset.appendChild(legend);  
}

來源

2013-08-29 18:45:26

-1

代碼，因爲你寫它會導致控制檯中的錯誤。在Chrome上，您會看到：

Uncaught TypeError: undefined is not a function

指向右邊第一個refreshDiv(divString)聲明。

雖然javascript中懸掛了變量，但只有聲明被掛起，而不是任務。（see fiddle with error）

一個簡單的解決方法是將變量聲明及其在第一次調用之上的賦值移動到refreshDiv。（Simple fix example）

function buttonClickHandler() { 
    var divString = "foodJournal"; 

    //refreshes food journal div 
    var refreshDiv = function(element) { 
     node = document.getElementById(element); 
     while (node.hasChildNodes()) { 
      node.removeChild(node.lastChild); 
     } 
    }; 

    refreshDiv(divString); 

    var divID = document.getElementById("foodJournal"); 
    var fieldset = document.createElement("fieldset"); 
    var legend = document.createElement("legend"); 
    legend.innerHTML = "Food Log"; 
    legend.setAttribute('id', "legend"); 
    divID.appendChild(fieldset); 
    fieldset.appendChild(legend); 

}

書面您的樣品中，實在是沒有理由把一個單獨的方法來清除DIV。如果這不僅僅是爲了說明您遇到的問題，您可能會考慮重構代碼以減少一些冗餘並刪除不必要的函數調用。

來源

2013-08-29 18:45:41 dc5

問題使用Javascript刷新div

回答

相關問題