javascript - 使用 Javascript 刷新 div 的问题

Question

我正在尝试编写一些代码，单击按钮后会填充一个 div，如下面的代码所示。问题是我想确保如果多次单击按钮，div 会重新加载。我尝试使用下面的refreshDiv函数来实现此功能，但是包含此功能后，单击按钮的操作不会执行任何操作。

 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);
         }
     };
 }

感谢任何帮助!

Answer 1

您在实际声明变量之前调用了 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);     
}