Question

我不想调用

        var element = document.getElementById('ph');

为了提高效率每次调用UpdateClock。所以我试图把它全局化，而不是把它放在UpdateClock里面。但是，它不起作用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>This is a title</title>
    <script>
        var element = document.getElementById('ph');

        function UpdateClock() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();

            if (hours < 10)
                hours = "0" + hours;
            if (minutes < 10)
                minutes = "0" + minutes;
            if (seconds < 10)
                seconds = "0" + seconds;
            element.innerHTML = hours + ":" + minutes + ":" + seconds;
        }

    </script>

</head>
<body onload="setInterval('UpdateClock()', 1000)">
    <h1 id="ph"></h1>
</body>
</html>

有什么问题？这里有什么我想念的吗？

Answer 1

你需要在之后运行代码，然后将元素添加到DOM中。

最简单的方法是：

<h1 id="ph"></h1> <script> var element = document.getElementById('ph'); </script>

或者，使用在添加元素后运行的事件处理程序。

<script> var element; addEventListener('load', function () { element = document.getElementById('ph'); }); </script>

Answer 2

编辑：我最初误解了这个问题。

将脚本标记放在正文中，位于底部

<script>
....js here
</script>
</body>

如何全局获取一次HTML元素并多次使用它？

2 个答案: