js 在多个按钮中获取点击按钮的id值

最新推荐文章于 2024-03-16 17:09:53 发布
转载 最新推荐文章于 2024-03-16 17:09:53 发布 · 5.1k 阅读 · 1

本文介绍了一个使用JavaScript为多个HTML按钮绑定点击事件的示例。通过遍历获取的所有按钮元素，并利用匿名函数确保每次点击都能正确地传递当前按钮的ID。 
window.onload = function(){
				var arr = document.getElementsByTagName('button');
				for(var i = 0;i<arr.length;i++){
					arr[i].onclick = function(){
						alert(this.id);//this是关键点
					}
				}
			}

<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
<button id="b4">b4</button>
如何在JavaScript中获取单选按钮组的值？
前端达人
08-11 592
在实际业务开发中，我们常常需要获取用户选择的单选按钮的值，比如用户在注册时选择性别、问卷调查时选择答案等。今天，我们就来聊聊如何在JavaScript中获取单选按钮组的值。实际业务场景假设我们正在开发一个用户注册页面，用户需要选择他们的性别。我们使用了一组单选按钮来表示性别选项。HTML代码如下：<div> <inputtype="radio"id="genderm"n...
防止按钮在短时间内被多次点击的方法
09-04
在当今的网页开发中，防止按钮在短时间内被多次点击是一个常见且重要的需求。尤其对于那些涉及提交、支付或其他关键操作的按钮，这样的措施对于避免用户无意或恶意地重复操作、维护系统稳定性和数据一致性至关重要。...
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
主要介绍了JavaScript给按钮绑定点击事件（onclick）的方法,涉及javascript绑定onclick的基本技巧,非常具有实用价值,需要的朋友可以参考下
多个按钮点击，判断是哪一个按钮，以及该按钮的取值
weixin_34210740的博客
01-09 3541
1.html文件 &lt;ul class="priceList" style="margin-top:16px;"&gt; &lt;li&gt;&lt;button id="bidPrice1"&gt;-100&lt;/button&gt;&lt;button id="bidPrice2"&gt;100&a
多个button中获取所点击button的值
malz_zh的博客
10-23 1万+
本人是在java中拼接的table表格，有多个点击按钮，需要获取每个点击按钮传递当前的ID，最初的程序如下： java代码： show_detail.append("&lt;tr&gt;"); show_detail.append("&lt;td style='white-space:nowrap;width:10%;text-align:center'&gt;"+tvordersbean.g...
点击单选按钮js获取出值
05-21
<script> $(function(){ $("input:radio").click(function () { //获取选中的radio的值 if($(this).attr("checked")){ var contactUserId = $(this).val(); alert(contactUserId ); } }); }); </script>
js获取按键的值
weixin_33752045的博客
12-04 548
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt;&lt;TITLE&gt;js 按键记录&lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus"&
js 如何在多个按钮中获取点击按钮的id值
热门推荐
三味线的铲屎官的博客
12-08 1万+
window.onload = function(){ var arr = document.getElementsByTagName('button'); for(var i = 0;i arr[i].onclick = function(){ alert(this.id); } } } b1 b2 b3 b4
使用jQuery多选按钮，并获得按钮的属性值
一个小白的求知路
05-24 2115
这两天因为搞这个东西头发都快点完了，因为是初学者所以很多都需要翻文档导致做得很慢。今天终于做出来了发个博客记录一下。 效果图 HTML代码 <div id="stuName"> <input type="button" class="btn btn-danger" value="小明01"> <input type="button" class="...
js中获取jsp表单中radio类型的值简单实例
10-21
单选按钮允许用户在一组选项中选择一个值，它通常使用`<input type="radio">`标签来创建，并且具有相同`name`属性的多个单选按钮共同构成一个选择组，这样可以保证用户只能选择其中一个选项。 在JSP页面中创建单选...
JS获取下拉框显示值和判断单选按钮的方法
10-23
单选按钮通常用于提供给用户在多个选项中选择一个的场景。在HTML中，多个单选按钮需要共享相同的`name`属性才能实现互斥选择。在本文的例子中，所有单选按钮的`name`属性都是"time"。 HTML代码示例如下： ```html ...
JS中点击下面button的按钮，实际获取上面input的值，获取兄弟元素
weixin_42943920的博客
01-17 1244
//转为number类型后，增加1 let number = target.previousElementSibling.value - 0 + 1;
js获取html中多个id,js获取数据库中多个id然后进行操作
weixin_36219784的博客
06-28 1639
function deleteEng() //操作选中数据{var checkBox = document.getElementsByName("checkall");//在页面中定义多选框的名称，从一个list列表中得到数据id，使多选框的值为idvar num=0;for(var i=0;i{if(checkBox[i].checked){num++}}if(num==0){alert("请选...
获取button中value值的方法
最新发布
weixin_55367649的博客
03-16 1575
获取4</button><button id="btn3">获取3</button><button id="btn1">获取1</button><button id="btn1">获取2
获取多个按钮
weixin_42014813的博客
04-25 493
//[SerializeField]   //GameObject[] btn; public GameObject[] btns;//获取按钮的引用    void Start () {        foreach (var item in btns)        {            UIEventListener.Get(item).onClick = Oncl;//给按钮添加事件 ...
点击循环中td里面的button，获取button属性不同的值,并发送Ajax做删除操作
君子不卿
11-14 322
在这个示例中，当任意一个按钮被点击时，会执行点击事件处理函数。在函数中，使用$(this)然后你可以使用这些值执行接下来的操作，比如发送Ajax请求或者进行其他处理。中的按钮被点击时获取不同属性的值，你可以使用以下方法。然后，在点击事件处理函数中使用$(this)来获取当前被点击的按钮，再使用.attr()首先，确保每个按钮有不同的自定义属性，比如。来获取相应的自定义属性的值。的值，并将它们存储在变量。假设你想在循环中的每个。来获取当前被点击的按钮。
【JS】js获得下拉列表选中项的值和id
weixin_34043301的博客
08-11 707
1 function tijiao(){ 2 var elem = document.getElementById("dish_sort"); 3 var index=elem.selectedIndex; 4 alert(elem.options[index].value); 5 alert(elem....
小程序mpvue怎么点击按钮获取button里面的值
weixin_44970764的博客
05-29 673
在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂...
js中在多个文本框中输入数字然后点击按钮进行排序
09-20
### 回答1： 可以使用 EPPlus 的 Range 对象来直接操作单元格，而不需要使用单元格模拟。例如，可以使用 Range.Value 属性来设置单元格的值，使用 Range.Style 属性来设置单元格的样式。此外，EPPlus 还提供了一些其他的 API，如 AutoFitColumns() 方法来自动调整列宽，以及 Merge() 方法来合并单元格等。 ### 回答2： 在JavaScript中，你可以使用以下步骤来实现在多个文本框中输入数字并点击按钮进行排序： 1. 首先，为每个文本框创建一个唯一的标识符（例如，给每个文本框设置一个id属性），这样我们可以通过该标识符获取每个文本框的值。 2. 在按钮的点击事件监听器中，创建一个空数组用于存储每个文本框的值。可以使用document.getElementById()方法来获取每个文本框的值，并将其添加到数组中。 3. 使用数组的sort()方法对数组进行排序。这将根据默认的字符串排序规则对元素进行排序，所以如果我们想让数字按照数字的大小进行排序，我们需要使用一个自定义的排序函数。 4. 创建一个新的空字符串，用于存储排序后的数字。可以使用数组的forEach()方法遍历排序后的数组，将每个数字添加到新的字符串中。 5. 最后，将排序后的数字字符串放回到文本框中显示出来。 下面是一个简单的示例代码来实现上述步骤： HTML代码： ```html <input type="text" id="input1" /> <input type="text" id="input2" /> <input type="text" id="input3" /> <button id="sortButton">排序</button> ``` JavaScript代码： ```javascript document.getElementById("sortButton").addEventListener("click", function() { var input1Value = parseInt(document.getElementById("input1").value); // 获取第一个文本框的值 var input2Value = parseInt(document.getElementById("input2").value); // 获取第二个文本框的值 var input3Value = parseInt(document.getElementById("input3").value); // 获取第三个文本框的值 var numbersArray = [input1Value, input2Value, input3Value]; // 将每个文本框的值存入数组 numbersArray.sort(function(a, b) { // 自定义排序函数：按照数字的大小进行排序 return a - b; }); var sortedNumbersString = ""; // 存储排序后的数字的字符串 numbersArray.forEach(function(number) { // 遍历排序后的数组 sortedNumbersString += number + " "; }); document.getElementById("input1").value = sortedNumbersString.trim(); // 将排序后的数字放回到第一个文本框中显示出来 }); ``` 注意：在代码中，我使用parseInt()方法将输入的值转换成整数，这是因为文本框中的值默认是字符串类型的，而我们需要比较和排序的是数字。 ### 回答3： 在JavaScript中，要实现在多个文本框中输入数字并点击按钮进行排序，可以按照以下步骤进行： 1. HTML部分：创建一个包含多个文本框和一个按钮的HTML页面，例如： ```html <input type="text" id="input1"> <input type="text" id="input2"> <input type="text" id="input3"> <button onclick="sortNumbers()">排序</button> ``` 这里创建了三个文本框和一个按钮，每个文本框都有一个唯一的id属性。 2. JavaScript部分：编写一个名为`sortNumbers()`的函数，实现排序的逻辑。在这个函数内部，首先获取文本框的值并存储在一个数组中，然后使用`Array.sort()`方法对数组进行排序，最后将排序后的结果重新赋值给文本框。代码示例如下： ```javascript function sortNumbers() { var input1 = document.getElementById("input1").value; var input2 = document.getElementById("input2").value; var input3 = document.getElementById("input3").value; var numbers = [input1, input2, input3]; numbers.sort(function(a, b) { return a - b; }); document.getElementById("input1").value = numbers[0]; document.getElementById("input2").value = numbers[1]; document.getElementById("input3").value = numbers[2]; } ``` 这里使用`var`关键字声明了三个变量`input1`、`input2`和`input3`来获取每个文本框的值。然后将这三个值保存在一个名为`numbers`的数组中，并使用`Array.sort()`方法对数组进行排序。最后，通过`document.getElementById()`方法获取每个文本框的元素，并将排序后的结果重新赋值给它们。 以上就是在JavaScript中实现在多个文本框中输入数字并点击按钮进行排序的基本步骤。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值