DOM基础2-17 编程练习

最新推荐文章于 2022-07-27 19:22:34 发布

请叫我二狗哥

最新推荐文章于 2022-07-27 19:22:34 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 基础案例文章标签： DOM基础

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

本文链接：https://blog.youkuaiyun.com/weimob258616/article/details/90138370

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

这篇博客介绍了如何使用DOM基础实现一个编程练习，即通过点击‘录入’按钮循环弹出输入框，让用户输入信息。当用户输入-1时停止，并将所有输入值显示在页面上。步骤包括创建按钮HTML，选择并绑定点击事件，以及编写事件处理函数来收集和显示用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2-17 编程练习

小伙伴们，今天我们学习了DOM 0级事件，那么根据gif图，实现以下功能：（1）当点击“录入”按钮时，循环弹出输入框，使用户输入信息

（2）直到用户输入-1，停止弹出输入框，然后将用户输入的信息输出在页面上。

Tips：

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

任务

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

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

Tips：按钮的值是“录入“

第二步：通过DOM选取元素的方式获取到“录入”按钮这个对象

Tips：获取按钮对象，用DOM选取元素的方式：id选取或者元素名选取均可

第三步：给“录入”标签绑定点击事件

Tips：注意调用函数的写法

第四步： “录入”按钮绑定的事件函数的执行代码

（1）定义一个新数组，保存用户输入的所有信息

（2）定义一个变量，接收用户每一次输入的信息

（3）循环弹出输入框，直到用户输入-1，则停止弹出；

（4）用户在输入框中输入的每一个信息，都放进新建的数组中，除了结束符-1

（5）将用户输入的信息依次显示在页面中

Tips：使用循环的方法输出信息

参考答案：

    <input type="button" value="录入">
    <script type="text/javascript">
        var inputs = document.getElementsByTagName("input");
        var entry = inputs[0];
        entry.onclick = entryFn;
        function entryFn() {
            //补充代码
            var con = prompt("请输入员工姓名");
            var i = 0;
            var arr = new Array();
            while (con !=="-1") {
                arr[i] = con;
                con = prompt("请输入员工姓名");
                i++;
            }
            if (con === "-1") {
                for (var a = 0; a < arr.length; a++) {
                    document.write("录入的第" + (a+1) + "个员工姓名是:" + arr[a]+"<br/>");
                }
            }

        }
    </script>