javascript - 重构未定义的函数和变量

Question

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

我在这里想做的是创建 div 并将其放在“level”div(或 var header)之前。然后我想在该 div 中放置一个图像。最终我想在那里放三个图像，所以我尝试重构一下，这样它就不会是一个很长的函数(我确信这不是干巴巴的，而是婴儿步骤)。下面的代码不起作用，因为“medalDiv”未定义。当我从 AwardTimeMedal() 插入代码而不是调用该函数时，它工作正常。我不确定这是否是一个范围问题，但我认为既然奖章Div是在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]);
}

我也尝试过没有“return MedalDiv”声明。

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

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

Answer 1

var MedalDiv 是wardMedal 的本地变量，并在awardTimeMedal 中使用。将其置于全局范围内以进行访问。