DOM基础2-16 编程练习

最新推荐文章于 2020-07-09 12:36:19 发布

请叫我二狗哥

最新推荐文章于 2020-07-09 12:36:19 发布

阅读量412

点赞数

分类专栏： Javascript 基础案例

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.csdn.net/weimob258616/article/details/90138413

版权

Javascript 同时被 2 个专栏收录

57 篇文章 3 订阅

订阅专栏

基础案例

39 篇文章 1 订阅

订阅专栏

2-16 编程练习

小伙伴们，今天我们学习了怎样给DOM对象绑定事件，那么根据gif图，实现以下功能：

（1）如果按钮的值是“全选”，当点击按钮时，按钮的值变为“反选”

（2）如果按钮的值是“反选”，当点击按钮时，按钮的值变为“全选”

注意：

使用通过DOM获取HTML元素的方式绑定事件

gif图如下：

任务

根据gif效果图实现下面的任务步骤：

第一步：先写出按钮的html代码

第二步：通过DOM获取元素的方式得到按钮对象

第三步：给按钮绑定点击事件，对按钮的值进行判断：

（1）如果按钮的值是“全选”，那么当按钮被点击时，按钮的值改为“反选”

（2）如果按钮的值是“反选”，那么当按钮被点击时，按钮的值改为“全选”

任务提示

按钮的初始值是“全选“

参考答案：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选和反选</title>
</head>
<body>
    <input type="button" value="全选">
    <script>
        // 此处填写代码
        var btn=document.getElementsByTagName("input")[0];
        btn.onclick=function(){
            if(this.value=="全选"){

                this.value="反选";
            }else{
                this.value="全选";
            }       
        }
    </script>
</body>
</html>

请叫我二狗哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础2-16 编程练习

2-16 编程练习小伙伴们，今天我们学习了怎样给DOM对象绑定事件，那么根据gif图，实现以下功能：（1）如果按钮的值是“全选”，当点击按钮时，按钮的值变为“反选”（2）如果按钮的值是“反选”，当点击按钮时，按钮的值变为“全选”注意：使用通过DOM获取HTML元素的方式绑定事件gif图如下：任务根据gif效果图实现下面的任务步骤：第一步：先写出按钮的ht...
复制链接

扫一扫