使用按鈕（在我的中繼器中）使用 javascript 顯示隱藏信息，但似乎不起作用

Question

第一次在這里發帖。

所以我的 html 中有一個中繼器，在該中繼器中我有一個按鈕，如下所示：

                <button type="button" class="btn btn-info">Contact</button>
                <p style="display: none" id="contact"><%# Eval("Email") %></p>

我想要做的是有一個隱藏的信息字段，這就是為什么我有 display: none 來隱藏它。 然后每次我按下按鈕時，我都希望電子郵件出現在它的下方。

我有一些 javascript 代碼可以做到這一點：

    var element = document.querySelectorAll(".btn btn-info");

    for (var i = 0; i < element.length; i++) {
        element[i].addEventListener('click', function () {
            this.style.display = "block";
        }, false)
    }

但我似乎無法讓它工作。 每次我按下按鈕都沒有任何反應。

如果有人可以幫助我，那將是非常棒的。 謝謝！

Answer 1

您必須將 JavaScript 更改為：

var elements = document.querySelectorAll(".btn.btn-info");

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        // Suppose this.nextElementSibling is the email hidden field
        this.nextElementSibling.style.display = "block";
    };
}