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

Answer 2

编写代码时，会导致控制台出错。在Chrome上，您会看到：

未捕获的TypeError：undefined不是函数

指向第一个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。如果这不只是为了说明您遇到的问题，您可以考虑重构代码以减少一些冗余并删除不必要的函数调用。

用Javascript发出刷新div

2 个答案: