0

可能重复：
为什么 jQuery 或诸如 `getElementById` 之类的 DOM 方法找不到元素？

我一直在尝试学习 js，但是我无法获得一个非常简单的示例来工作，而且我似乎找不到我做错了什么。据我了解，下面的示例应该可以工作。当我点击第二个按钮时，它调用函数 f2 并输出“batman”作为警报，所以我知道 javascript 页面链接正确。但是当我点击第一个按钮时，什么也没有发生。

HTML：

<head>
<script type="text/javascript" src="Positioning and flow tests.js"></script>
</head>

<body>

<p id="par1">Test</p>

<button onclick="f1()">Click me for par 1 content</button>

<button onclick="f2()">Click me for predefined text</button>
</body>
</html>

Javascript

// JavaScript Document

var var1 = document.getElementById("par1");

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
alert("batman");
}
4

2 回答 2

3

您必须将 JavaScript 放在页面底部，否则par1当您的代码运行时该元素将不可用：

<head>
    <title>Positioning and flow tests</title>
</head>

<body>
    <p id="par1">Test</p>
    <button onclick="f1()">Click me for par 1 content</button>
    <button onclick="f2()">Click me for predefined text</button>
    <script type="text/javascript" src="Positioning and flow tests.js"></script>
</body>

另一种方法是将代码设置为在页面完成加载时运行：

var var1;
window.onload = function () {
    var1 = document.getElementById("par1");
};

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
    alert("batman");
}

但这将等到页面完全加载，其中包括下载所有图像。如果您在所有图像完全下载之前单击第一个按钮，则会出现错误。

于 2013-02-03T23:35:31.280 回答
1

您需要将代码放在元素之后或执行以下操作： HTML：

<body onload="init()">
...

JS：

var var1;
function init() {
    var1 = document.getElementById("par1");
}

function f1()
{
    alert(var1.innerHTML);
}

问题是您正在尝试获取尚未创建的元素，因此不存在。使用“init”函数将等到整个文档加载完毕后再尝试获取元素。

于 2013-02-03T23:40:14.817 回答