JS实现监听事件，添加删除显示控件

最新推荐文章于 2024-03-07 09:46:24 发布
最新推荐文章于 2024-03-07 09:46:24 发布
阅读量943 收藏
点赞数 2
分类专栏： javascript 文章标签： JS事件监听 添加删除控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdfujichao/article/details/51274929
版权

显示三个输入框和三个按钮。可以输入相应的数字进行相应的操作。当输入的数字不合理是就会弹窗、

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <body>
        <input type="text"  id="creat"  /><input id="creatBtn" type="button" value="创建" /><br />
        <input type="text"  id="dele"  /><input id="deleBtn" type="button" value="删除"/><br />
        <input type="text"  id="show"  /><input id="showBtn" type="button" value="显示" /><br />
        <div id="divOne">
        </div>
    </body>
    <script type="text/javascript">
        var divOn = document.getElementById("divOne");
        var subArr = divOn.children;
        
        var creatDiv = document.getElementById("creat");
        var deleDiv = document.getElementById("dele");
        var showDiv = document.getElementById("show");
        
        creatBtn.onclick = function(){
            var inputCount = Number(creatDiv.value);
            
            var showCount = divOn.children.length + 1;
            //alert(inputCount);
            //alert(showCount)
            if(inputCount > showCount){
                alert("请输入小于等于"+showCount+"的数字");
                creatDiv.value = null;
                creatDiv.focus();
                
            } else if(inputCount>0){ // 符合要求，添加div
                //alert("fuji")
                var subDiv = document.createElement("div");
                subDiv.style.width = "200px";
                subDiv.style.height = "100px";
                subDiv.style.backgroundColor = "red";
                subDiv.innerHTML = "<h1>fujichao<h1/>"
                divOn.insertBefore(subDiv,subArr[inputCount+1]);
                creatDiv.value = null;
                creatDiv.focus();
            }
            
        }
        deleBtn.onclick = function(){
            var inputCount = Number(deleDiv.value);
            //alert(inputCount);
            var showCount = divOn.children.length -1;
            
            if(inputCount >= showCount+1){
                alert("请输入小于"+showCount+"的数字");
                deleDiv.value = null;
                deleDiv.focus();
                
            } else if(inputCount>=0){ //  删除div
                
                divOn.removeChild(subArr[inputCount]);
                alert("输入的是数组下标为"+inputCount+"的数数")
                //alert("fujicaho")
                deleDiv.value = null;
                deleDiv.focus();
            }
            
        }
        showBtn.onclick = function(){
            var inputCount = Number(show.value);
            //alert(inputCount);
            var showCount = divOn.children.length - 1;
            
            if(inputCount > showCount){
                alert("请输入小于"+showCount+"的数字");
                show.value = null;
                show.focus();
                
            } else if(inputCount>=0){ //  删除div
                //alert(inputCount);
                alert("输入的是数组下标为"+inputCount+"的数数")
                //alert(inputCount);
                show.value = null;
                show.focus();
            }
        }
    </script>
</html>

sdfujichao
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS事件监听方法
weixin_57726973的博客
06-09 3761
我们在学习的时候，最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法。 传统事件绑定方法的特点如下： 1.事件名称之间一定要加上on，比如：onclick、onload、onmousemove。2.兼容主流的浏览器，包括低版本的IE。3.当同一个元素绑定多个事件时，只有最后一个事件会被添加，并且传播模式只能是冒泡模式。二、addEventListener()方法特点：1.element.addEventListener(event, function, useCapture)中的第三个参数可以控
基于Jquery的动态添加控件并取值的实现代码
10-28
1. 引入JQuery库：`<script src="jquery-1.4.2.js" type="text/javascript"></script>` 这行代码引入了JQuery 1.4.2版本，这是实现动态添加控件所必需的。 2. 定义JQuery代码块：`$(function() {...})` 这是JQuery...
js事件监听器用法实例详解-注册与注销监听封装
weixin_34116110的博客
01-06 274
本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下： 1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下： ? 1 2 3 4 5 6 7 8 9 10...
监听控件事件方法
XCBYZX的博客
04-24 614
监听控件的事件有三种方法： 1.delegate 2.target - (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents; 3.通知 [[NSNotificationCenter defaultCenter]addObserver:(no
js监听事件使用
weixin_44944193的博客
11-07 8456
添加和去除监听事件. addEventListener(‘事件’,函数); // 第一个参数事件参数, 没有前缀"on", w3c的标准,IE不支持 注意点1: 如果添加了多个事件处理函数, 按"添加时的先后顺序来执行" 注意占2: 事件处理函数中的this 指代 DOM节点自身 注意点3: 第一个事件参数,一律把事件名称的’on’去掉 去除绑定 removeEventListener...
JavaScript的事件监听
Welisit的博客
09-15 5266
用户点击了某个按钮响应编写处理程序如何进行事件监听呢？scripton。
JS实现可点击添加删除的下拉列表框多选标签控件源码.zip
11-01
本资源"JS实现可点击添加删除的下拉列表框多选标签控件源码.zip"提供了一个利用JavaScript实现的交互式下拉列表框，其中包含了多选功能以及标签展示的效果。这个控件允许用户不仅可以选择多个选项，还可以通过点击来...
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
为了实现删除功能，通常会在每一行的“操作”列中添加一个删除按钮，然后为该按钮添加一个点击事件监听器。监听器函数可能如下所示： ```javascript function deleteRow(rowId) { var table = document....
Calendar:JavaScript实现的可以查看、添加、删除待办事项的日历控件
06-17
【JavaScript实现的日历控件——Calendar】是一种网页交互元素，用于帮助用户查看、管理他们的待办事项。在本文中，我们将深入探讨这个日历控件的实现细节、功能以及其在JavaScript编程中的应用。 首先，JavaScript...
JS的监听事件
m0_74359467的博客
12-05 897
方法添加了多个相同类型的事件监听器，它们将按照添加的顺序依次执行。而当使用属性赋值或其他方法替换事件监听器时，之前添加的监听器可能会被覆盖。3.其他事件监听方法：除了以上两种方法，还有许多特定的事件监听方法，如。在JavaScript中，你可以使用监听器来捕获和处理不同类型的事件。，用于指定事件是否在捕获阶段触发（默认为false，即在冒泡阶段触发）。这些方法是DOM对象的属性，可以通过直接赋值函数来进行事件监听。器，你可以指定当特定事件发生时要执行的函数。：直接将函数赋值给一个元素的。
js 冒泡事件与事件监听使用分析
12-11
冒泡事件 js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的“冒泡”应该说是交换更加准确；js里面的“冒泡事件”才是真正意义上的“冒泡”，它从DOM最低层逐层遍历树，然后附加相应事件。以下面代码为例： 冒泡事件 点击 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 查看运行效果 事件监听 事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 btnAdd.onclick=”alert(’51obj
用javascript来实现防止多个按钮被同时按下的方法
02-01
用javascript来实现防止多个按钮被同时按下的方法
JS事件监听两种使用方法
wangxuanyang_zer的博客
03-17 3212
js事件监听,从里到外的分析了一下,从基本的click点击事件到addEventListener的事件监听
JQuery 给DOM控件绑定和移除事件的方法
weixin_30245867的博客
07-12 246
绑定事件： Method 1$("#myElement").click( function() {alert($(this).text());}); Method 2 $("#myElement").bind('click', function() {alert($(this).text());}); 第一种看起来要方便一些，但它有一个局限，即DOM元素必须存在才可以。如...
JS事件监听与事件委托（前端小白必学）
最新发布
xuemen11的博客
03-07 2085
JS，事件监听、事件委托，捕获冒泡行为
Js如何删除所有子元素以及当前元素
itclanCoder
02-02 3294
示例展示deleteallelem具体描述在原生js当中,html的内容元素总是以嵌套的关系存在于网页中,因此,可以通过遍历树的方法访问网页里的每一个元素,当然也是可以删除指定的子元素的原生js代码//删除元素的函数 functiondeleteChilds(){ varul=document.getElementsByTagName("ul")[0];//获取父级DOM ...
JavaScript删除所有子元素
KevinMiGuan的博客
11-08 6233
    var div = document.getElementById("div1");     while(div.hasChildNodes()) //当div下还存在子节点时 循环继续     {         div.removeChild(div.firstChild);     }
动态添加组件，添加id，获取子控件，移除控件
马的博客
10-03 3597
动态创建关键代码（新添加的view是自己写的xml布局view） // 1. 获取自定义的 View Button button = (Button) LayoutInflater.from(this).inflate(R.layout.custom_layout_btn, linearLayout, false); // Button button = new Button(this); //...
JS删除子节点
zhonglin_li的博客
01-09 1704
function deleteRow(obj) { var objChilds = obj.children; /* 得到子元素 */ if(objChilds.length != 0) {/* 长度不为0，开始删除 */ for(var i = objChilds.length-1; i>=0; i--) { obj.r
使用OpenLayers添加与删除地图控件
"本资源主要介绍如何在OpenLayers中添加和删除控件，提供了一个包含所有OpenLayers控件的地图示例，并通过一个侧面板的按钮让用户根据需要切换控件。" 在OpenLayers这个强大的开源JavaScript库中，我们可以利用各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值