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

Question

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

因此，我试图仅使用Javascript而不是在HTML代码中使用任何Javascript来获取位于特定div下的按钮的ID。

我的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”。

有任何想法吗？

谢谢

Answer 1

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

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

Answer 2

尝试这个 ，

document.getElementByID（“＃id”）。value

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

尝试这一警报（$（this）.id）