使用按钮(在我的中继器中)使用JavaScript显示隐藏的信息，但似乎不起作用

Question

第一个文章。

所以我的html中有一个中继器，在那个中继器中，我有一个按钮，如下所示：

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

我想做的是拥有一个隐藏的信息字段，这就是为什么我要显示的原因：没有隐藏它。然后，每当我按下按钮时，我希望电子邮件出现在其下方。

我有一些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";
    };
}