函数调用[javascript] 功能切换（id）{ 警报（“呼叫”）； if（document.getElementById（id.style.display==“无”）{ 警报（“现在可见”）； document.getElementById（id）.style.display=“”； }否则{ 警报（“现在不可见”）； document.getElementById（id）.style.display=“无”； } } 警报（“测试前功能”）；切换（'image1'）；警报（“功能后测试”）；切换（'image2'）；_Javascript

函数调用[javascript] 功能切换（id）{ 警报（“呼叫”）； if（document.getElementById（id.style.display==“无”）{ 警报（“现在可见”）； document.getElementById（id）.style.display=“”； }否则{ 警报（“现在不可见”）； document.getElementById（id）.style.display=“无”； } } 警报（“测试前功能”）；切换（'image1'）；警报（“功能后测试”）；切换（'image2'）；

javascript

函数调用[javascript] 功能切换（id）{ 警报（“呼叫”）； if（document.getElementById（id.style.display==“无”）{ 警报（“现在可见”）； document.getElementById（id）.style.display=“”； }否则{ 警报（“现在不可见”）； document.getElementById（id）.style.display=“无”； } } 警报（“测试前功能”）；切换（'image1'）；警报（“功能后测试”）；切换（'image2'）；,javascript,Javascript,看起来有很多代码，但它非常简单，所以我认为你们大多数人不会有问题。toggle（）应切换包含图像的div的显示状态当用户进入站点时，div应该隐藏，当加载所有内容时，div应该显示出来。（空载）奇怪的是，body中的函数（不在body标签中）只工作了一半，我得到并警告“test_pre_function”，我得到一个警告“call”（从函数中），但仅此而已。 body标记中的代码运行良好我觉得这很奇怪，因为它应该执行完全相同的两次操作，一次运行，另一次不运行，所以我想我一定犯了一些愚蠢的错

看起来有很多代码，但它非常简单，所以我认为你们大多数人不会有问题。toggle（）应切换包含图像的div的显示状态

当用户进入站点时，div应该隐藏，当加载所有内容时，div应该显示出来。（空载）

奇怪的是，body中的函数（不在body标签中）只工作了一半，我得到并警告“test_pre_function”，我得到一个警告“call”（从函数中），但仅此而已。 body标记中的代码运行良好

我觉得这很奇怪，因为它应该执行完全相同的两次操作，一次运行，另一次不运行，所以我想我一定犯了一些愚蠢的错误。

脚本一经解析就会执行。如果执行脚本时未分析

image1

和

image2

，则

document.getElementById（“image1”）

将返回null，因此

.style.display

将抛出“为null或不是对象错误”。这解释了为什么两个警报在第一行

document.getElementById（id）.style.display==“none”

时停止工作

将脚本移动到文档中图像元素之后，它应该可以工作

<script language="javascript">
function toggle(id) {
    alert('call');
    if (document.getElementById(id).style.display == "none") {
        alert('now visible');
        document.getElementById(id).style.display = "";
    } else {
        alert('now invisible');
        document.getElementById(id).style.display = "none";
    }
}
</script>

</head>
<body onload="toggle('image1');alert('test_body');toggle('image2')">

<script language="javascript">
alert('test_pre_function');
toggle('image1');
alert('test_after_function');
toggle('image2');
</script>


警报（document.getElementById（“image1”）；//->无效的
警报（document.getElementById（“image1”）；//->对象

您是否错过了这个

<script>
    alert(document.getElementById("image1")); // -> null
</script>
<img id="image1" src="some/image.jpg" />
<script>
    alert(document.getElementById("image1")); // -> object
</script>

试试这个

但是这里的主要问题是，正如其他人所说，在文档完全加载之前，DOM还没有准备好。

您在body onload中使用了alert。基本上，一旦警报被执行，它就会要求您单击

OK

。同时，最后一个函数可能会延迟聚焦

见下文

var toggle = (function() {
    // an object to keep state for elements
    var state = {};
    return function(id){
        document.getElementById(id).style.display = (state[id] = !state[id]) ? "none" : "block";
    };
})();


toggle("myid"); // none
toggle("myid"); // block


警报（document.getElementById（“image1”）；
警报（document.getElementById（“image1”）；

Firebug等Javascript调试器将帮助您解决此类问题。它会让你看到通常隐藏的Javascript错误。@Schwerm：好的，我一定会看一看。这是一个非常棒的复制粘贴。我知道，这是解决方案，但我无法标记它是否已被回答，还需要再等2分钟

var toggle = (function() {
    // an object to keep state for elements
    var state = {};
    return function(id){
        document.getElementById(id).style.display = (state[id] = !state[id]) ? "none" : "block";
    };
})();


toggle("myid"); // none
toggle("myid"); // block

<script>
    alert(document.getElementById("image1"));
    <img id="image1" src="some/image.jpg" />
    alert(document.getElementById("image1"));
</script>