Javascript 未定义重构函数和变量

我对任何编码都很陌生，所以如果这个问题看起来很容易查找，我很抱歉，但我不确定在这里查找什么

我在这里要做的是创建div，并将其放在“level”div（或var头）之前。然后我想在那个div中放一个图像。最后我想放三个图像在那个里，所以我试着重构一下，这样它就不会是一个很长的函数（我确信这不是干巴巴的，而是很小的步骤）。下面的代码不起作用，因为没有定义“medalDiv”。当我从awardTimeMedal（）插入代码而不是调用函数时，它工作正常。我不确定这是否是一个范围问题，但我认为因为medalDiv是在awardMedal（）中定义的，所以awardTimeMedal可以访问它

//doesn't work
function awardMedal(){
    var medalDiv = document.createElement("div");
    awardTimeMedal();
    var header = document.getElementById("level");
    header.insertBefore(medalDiv, header.childNodes[0]);

}

function awardTimeMedal(){
    var timeMedal = document.createElement("img");
    timeMedal.src = properties.MEDAL_OFF;
    timeMedal.className = "medals";
    medalDiv.appendChild(timeMedal);
    return medalDiv;
}

//works
function awardMedal(){
    var medalDiv = document.createElement("div");
    var timeMedal = document.createElement("img");
    timeMedal.src = properties.MEDAL_OFF;
    timeMedal.className = "medals";
    medalDiv.appendChild(timeMedal);
    var header = document.getElementById("level");
    header.insertBefore(medalDiv, header.childNodes[0]);
}

我也试过，但没有“返回麦道夫”的声明

谢谢。如果我没有遵守任何适当的礼仪，我很抱歉，并感谢您的帮助

---

编辑：好的，这是有道理的。非常感谢。

var medalDiv是awardMedal的本地版本，用于awardTimeMedal。将其放在全局范围内访问。

您的第一个功能不起作用的主要原因是

awardTimeMedal

无法访问

medalDiv

我相信更好的方法是返回

awardTimeMedal

元素并将其附加到

awardMedal

函数中，如下所示：

function awardMedal(){
    var medalDiv = document.createElement("div");
    var timeMedal = awardTimeMedal();
    medalDiv.appendChild(timeMedal);

    var header = document.getElementById("level");
    header.insertBefore(medalDiv, header.childNodes[0]);
}

function awardTimeMedal(){
    var timeMedal = document.createElement("img");
    timeMedal.src = properties.MEDAL_OFF;
    timeMedal.className = "medals";
    return timeMedal;
}

---

更新前一个函数

function awardMedal(){
    var medalDiv = document.createElement("div");
    awardTimeMedal(medalDiv);
    var header = document.getElementById("level");
    header.insertBefore(medalDiv, header.childNodes[0]);

}

function awardTimeMedal(medalDiv){
    var timeMedal = document.createElement("img");
    timeMedal.src = properties.MEDAL_OFF;
    timeMedal.className = "medals";
    medalDiv.appendChild(timeMedal);
    return medalDiv;
}

---

问题是，当调用

awardTimeMedal（）

时，必须将返回值存储在一个变量中，以便从调用过程中访问它，即

awardMedal（）

。所以

var ref = awardTimeMedal();

现在，您可以使用ref附加到正确的元素。 仅供参考，无论何时使用var或function关键字，它都会在JavaScript中创建一个新的词法范围。这意味着当前范围与新引入的范围严格绑定。当您尝试访问该范围内的变量或引用时，编译器将查看该范围的堆栈，如果未找到引用的变量，则在父范围内。父范围通常解析为文档（如果未明确防范）