关于JS几个小问题(脚本位置，innerHTML，函数命名，计时器(setInterval)参数)

最新推荐文章于 2022-11-08 01:17:01 发布

I.M.Curie

于 2019-11-03 21:13:58 发布

270

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43537187/article/details/102886638

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

关于JS几个小问题(脚本位置，innerHTML，函数命名，计时器(setInterval)参数)

关于JS几个小问题(脚本位置，innerHTML，函数命名，计时器(setInterval)参数)

PS：这几天学习JS中遇到了几个自己没注意的小问题，在此记录下来，以作分享

一、JavaScript脚本位置放置

示例：

JavaScript脚本放在head里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var p1=document.getElementById("p1");
        p1.innerHTML="hello";
    </script>
</head>
<body>
    <p id="p1"></p>
</body>
</html>

执行结果：界面没有任何输出

JavaScript脚本放在body里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="p1"></p>
    <script type="text/javascript">
        var p1=document.getElementById("p1");
        p1.innerHTML="hello";
    </script>
</body>
</html>

执行结果：
在这里插入图片描述

小结：

网页源代码是从上到下来解析的，上面案例由于 <p id="p1"></p>未解析，脚本引擎无法找到p1元素而失去作用，所以没有显示。所以对于JavaScript脚本来说，各种公共函数和变量应放在<head></head>之间，而将页面加载期间执行的代码，DOM对象的初始化及与DOM相关的全局引用赋值放在<body></body>之间，如果没有特殊要求，放在body里即可

二、innerHTML和value的区别

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p style="color: red">innerHTML:</p>
    <p id="p1"></p>
    <input type="text" id="txt1">
    <br>
    <p style="color: red">value:</p>
    <p id="p2"></p>
    <input type="text" id="txt2">

    <script type="text/javascript">
        var p1=document.getElementById("p1");
        var txt1=document.getElementById("txt1");
        p1.innerHTML="hello";
        txt1.innerHTML="hello";

        p2.value="hello";
        txt2.value="hello";
    </script>
</body>
</html>

执行结果：
在这里插入图片描述

小结：

简单点说

value是用来修改或获取 textarea和input 的value属性的内容
innerHTML用来修改或获取 HTML标签元素的内容

PS：innerText用来修改或获取 HTML标签所包含的内容

三、JS函数命名问题

函数命名中，避免与一些内置函数名重复，例如==open() ，close() ，start()==等等，

否则会出现错误。（泪奔，一开始不知道，用了open，close命名，就找不出来哪出的问题，😂）

四、setInterval参数

示例：

第一种写法

<body>
    <input type="button" value="点击" onclick="show()">
    <script type="text/javascript">
    function show(){
        var atime = setTimeout(fun,3000);
        function fun(){
            alert("hello");
        }
    }
    </script>
</body>

第二种写法

<body>
    <input type="button" value="点击" onclick="show()">
    <script type="text/javascript">
    function show(){
        var atime = setTimeout(function fun(){
            alert("hello");
        },3000);
    }
    </script>
</body>

注意这样写不行

<body>
    <input type="button" value="点击" onclick="show()">
    <script type="text/javascript">
    function show(){
        var atime = setTimeout(alert("hello"),3000);
    }
    </script>
</body>

小结：
参数要么写函数名，要么直接把函数及操作方法写里面，(还不清楚为啥，也许我的某些操作有问题，希望各位给出建议)

I.M.Curie

关注

0
点赞
踩
0

收藏
打赏
0
评论
关于JS几个小问题(脚本位置，innerHTML，函数命名，计时器(setInterval)参数)

文章目录关于JS几个小问题(脚本位置，innerHTML，函数命名，计时器(setInterval)参数)一、JavaScript脚本位置放置二、innerHTML和value的区别三、JS函数命名问题四、setInterval参数关于JS几个小问题(脚本位置，innerHTML，函数命名，计时器(setInterval)参数)PS：这几天学习JS中遇到了几个自己没注意的小问题，在此记录下来，...
复制链接

扫一扫