Javascript在HTML中的执行顺序的问题

最新推荐文章于 2023-06-21 10:49:24 发布

myahuang

最新推荐文章于 2023-06-21 10:49:24 发布

阅读量278

点赞数

分类专栏： Javascript学习笔记文章标签： javascript html5

本文链接：https://blog.csdn.net/myahuang/article/details/108475849

版权

Javascript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html的代码在浏览器打开的时候执行顺序是从上到下，依次执行，事件触发的代码是事件触发的时候执行。比如下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {background-color:black;}
        p {color:yellow;}
    </style>
    <script>
        var tag1 = {};
        var x = tag1;
        x.name='Bob';
        var cname =x.name;
        function myFunction()
        {
            document.getElementById("main").innerHTML = cname;
            cname ='Tiger'
        }
        function myFunction2()
        {
            document.getElementById("bran1").innerHTML = x.name;

        }

    </script>
</head>

<body>
<p id ='main'> this is my first javascript code</p>
<button onclick="myFunction()">点击这里</button>
<p id ='bran1'> hello world!</p>
<button onclick="myFunction2()">继续</button>
</body>
</html>

这段代码中script部分无论放在body部分前还是之间或者之后，都不会报错，因为代码是页面加载代码执行完后点击才触发，这时候对id的引用getElementById是没问题的，但是如果在script代码部分添加myFunction2()变成：

<script>
    var tag1 = {};
    var x = tag1;
    x.name='Bob';
    var cname =x.name;
    function myFunction()
    {
        document.getElementById("main").innerHTML = cname;
        cname ='Tiger'
    }
    function myFunction2()
    {
        document.getElementById("bran1").innerHTML = x.name;
    }
    myFunction2()
</script>

那么这段代码只能放在body段里的最后面或者body段外的后面，而放在head部分或者body段里元素前面都会报错。

myahuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript在HTML中的执行顺序的问题

html的代码在浏览器打开的时候执行顺序是从上到下，依次执行，事先触发的代码是事件触发的时候执行。比如下面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body {background-color:black;} p {color
复制链接

扫一扫