Question

我对任何编码都很陌生，所以如果这个问题很容易被搜索，我很抱歉，但我不知道该在这里寻找什么。

我在这里要做的是创建div并将其放在＆＃34; level＆＃34;之前。 div（或var header）。然后我想在那个div中放一个图像。最后我想把三张图片放在那里，所以我试着重构一下，所以它不会是一个很长的功能（我确定这不是干，但宝贝步骤）。下面的代码不起作用，因为＆＃34; medalDiv＆＃34;没有定义。当我从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]);
}

我还试过没有＆＃34;返回medalDiv＆＃34;言。

感谢。对不起，如果我没有遵循任何正确的礼节，我们将不胜感激。

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

Answer 1

var medalDiv是awardMedal的本地，用于awardTimeMedal。将其置于全球范围内以便访问。

Answer 2

更新以前的功能

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

Answer 3

问题在于，当您调用awardTimeMedal()时，必须将返回值存储在变量中，以便可以从调用进程访问它，即awardMedal()。所以，

var ref = awardTimeMedal();

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

Answer 4

您的第一个功能不起作用的主要原因是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;
}

没有定义重构函数和变量

4 个答案: