Question

目前，我将网站作为我的个人项目。我已经测试了我的javascript，它在chrome和firefox上运行良好。但是当我在IE中测试它时，只有部分代码可以工作。有点奇怪的是，当我按下f12并打开开发人员工具时，代码运行完美！工作就像它应该的那样，没有任何错误。

这是我的javascript：

var state_Clicked = false;
var List = document.createElement("div");

function gearClick() {
    if(state_Clicked == true) {
        List.parentNode.removeChild(List);
        state_Clicked = false;
    } else {
        List.setAttribute("id", "containBox");
        List.setAttribute("class", "bgChooserBox");
        List.innerHTML = '<span class="thumback"><img onMouseDown="changeBackground(\'RD1_SlurpyNom.jpg\');" class="thumb" src="GRAPHICS/bg/RD1_SlurpyNom.jpg" width="100" height="100" /></span> \
                          <span class="thumback"><img onMouseDown="changeBackground(\'FS1_SlurpyNom.jpg\');" class="thumb" src="GRAPHICS/bg/FS1_SlurpyNom.jpg" width="100" height="100" /></span> \
                          <span class="thumback"><img onMouseDown="changeBackground(\'AJ1_SlurpyNom.png\');" class="thumb" src="GRAPHICS/bg/AJ1_SlurpyNom.png" width="100" height="100" /></span> \
                          <span class="thumback"><img onMouseDown="changeBackground(\'PP1_SlurpyNom.png\');" class="thumb" src="GRAPHICS/bg/PP1_SlurpyNom.png" width="100" height="100" /></span> \
                          <span class="thumback"><img onMouseDown="changeBackground(\'R1_SlurpyNom.jpg\');" class="thumb" src="GRAPHICS/bg/R1_SlurpyNom.jpg" width="100" height="100" /></span> \
                          <span class="thumback"><img onMouseDown="changeBackground(\'TS1_SlurpyNom.jpg\');" class="thumb" src="GRAPHICS/bg/TS1_SlurpyNom.jpg" width="100" height="100" /></span> ';
        document.getElementsByTagName("body").item(0).appendChild(List);

        state_Clicked = true; 
    }
}

function changeBackground(name) {
    console.log('/GRAPHICS/bg/' + name);
    document.getElementById("body").style.backgroundImage = 'url(/GRAPHICS/bg/' + name + ')';
    document.getElementById("logo").style.opacity = '0.4';
}

非常感谢任何帮助。

Answer 1

删除console.log电话。它需要一个console对象，否则会抛出错误。这就是为什么当你打开开发者工具时它会起作用，它们提供了一个控制台。

Answer 2

console.log是最有可能导致问题的原因。控制台不是DOM中的实际对象，它通常由firebug，chrome开发人员工具，IE开发人员工具等工具添加。更新版本的Chrome和Firefox在未打开时忽略控制台调用。或者至少我认为情况就是如此，因为很多人正在利用控制台进行现在的调试以及让人们更轻松的方式。

无论如何，当你的开发工具打开控制台时，你的IE是一个活动对象，因此你的脚本在打开时不会中断，但是当它关闭时，控制台对象不存在，并且因为它不是在这种情况下浏览器没有被忽略，脚本正在破碎。

从现在到结束，IE已经并且可能永远是每个Web开发人员的荆棘。

如果您想使用控制台进行调试，我的建议是在逻辑中添加一个if-else，这样您就可以打开和关闭来回翻转..

类似于if(console.length > 0){console.log('blah');}

IE对我的javascript背景更改代码很奇怪。为什么？

2 个答案: