Question

我已经在Stack Overflow上搜索了几个小时并看到了类似的问题，但是所提供的解决方案都不是我想要的，或者只是简单的不起作用。

所以我正在尝试使用Javascript来获取位于特定div下的按钮的ID，而不是在HTML代码中使用任何Javascript。

我的HTML代码如下所示：

         <div id="constants" class="hidden">
            <fieldset>
                <legend>Gas</legend>
                <div>
                    <div class="daily_charge">
                        <p>Daily charge: <span id="gasDaily"></span></p>
                        <button id="gasDaily_Edit">Edit</button>
                    </div>
                    <div class="rate_charge">
                        <p>Gas rate: <span id="gasRate"></span></p>
                        <button id="gasRate_Edit">Edit</button>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Elec</legend>
                <div>
                    <div class="daily_charge">
                        <p>Daily charge: <span id="elecDaily"></span></p>
                        <button id="elecDaily_Edit">Edit</button>
                    </div>
                    <div class="rate_charge">
                        <p>Elec rate: <span id="elecRate"></span></p>
                        <button id="elecRate_Edit">Edit</button>
                    </div>
                </div>
            </fieldset>                         
            <fieldset>
                <legend>Water</legend>
                <div>
                    <div class="daily_charge">
                        <p>Daily charge: <span id="waterInDaily"></span></p>
                        <button id="waterInDaily_Edit">Edit</button>
                    </div>
                    <div class="rate_charge">
                        <p>Water rate: <span id="waterInRate"></span></p>
                        <button id="waterInRate_Edit">Edit</button>
                    </div>
                </div>
            </fieldset>
        </div>

和我一直试图使用的Javascript失败的是：

var constantsDiv = document.getElementById("constants");
var constants_button = constantsDiv.getElementsByTagName("button");
var button_count = constants_button.length;

 for (var i = 0; i <= button_count; i += 1) {
    constants_button[i].onclick = function (e) {    
        alert(this.id);
    }; 
};

首先，我不确定将它放在for循环中是完全正确的方法，但无论如何我得到'无法设置属性'onclick'of undefined或null reference'。

有什么想法吗？

由于

Answer 1

您的for()语句将在最后一个元素中崩溃。更改删除条件中的=符号：

for (var i = 0; i < button_count; i += 1) {
===================^

Answer 2

试试这个，

的document.getElementById（ “＃标识”）。值

Answer 3

您可以使用：e.target.id

for (var i = 0; i < button_count; i += 1) {
    constants_button[i].onclick = function (e) {    
        alert(e.target.id);
    }; 
};

Answer 4

你可以试试这个：

e.target.getAttribute("id")

其中e是函数中处理事件的变量。

Answer 5

添加一个函数，在单击按钮（带有类）上创建数据点击元素，然后查找数据和她的值...

$(".btnToClick").on("click", function {
    $(this).data('click', true);
})

和

$(".btnToClick [data-click=true]").val();

我用JQuery写了

Answer 6

试试这个警报（$（本）.ID）

Javascript - 如何获取单击按钮的ID

6 个答案: