1

我正在尝试编写一些代码，在单击按钮时会填充一个 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);
         }
     };
 }

任何帮助表示赞赏！

4

2 回答 2

0

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-29T18:45:26.267 回答
-1

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

未捕获的类型错误：未定义不是函数

指向第一个refreshDiv(divString)语句。

虽然变量在 javascript 中被提升，但只有声明被提升，而不是赋值。（见 fiddle with error）

一个简单的解决方法是将变量声明及其赋值都移到第一次调用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);

 }

正如您的示例中所写，确实没有理由使用单独的方法来清除 div。如果这不仅仅是为了说明您遇到的问题，您可能会考虑稍微重构代码以减少一些冗余并删除不必要的函数调用。

于 2013-08-29T18:45:41.633 回答