JavaScript 获取元素名称值

Question

我试图在用户单击时从元素名称中获取值，我在标签管理系统中设置了提交跟踪，用于跟踪提交事件发生的时间，但是在某些页面上，客户端有两个地方可供客户签名起来，他们想要将事件分开。

我不是开发人员，因此需要一些帮助，我已将标签管理系统中的点击跟踪绑定(bind)到:

“button.button--rightSide.validateFormSubmit”

基于以下代码:

    <ul class="prhList prhList--hor prhForm__form">
   <li class="prhForm__form__input">
      <div class="prhForm__item inputText inputText--leftSide newsletterForm__emailInput validateInputText">
         <div class="inputField inputText__input">
            <input class="inputField__input" type="email" name="email" data-email="email_1424" value="" autocomplete="off" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
            <input type="hidden" name="adestraActionUrl" value="https://penguin-group.msgfocus.com/k/Penguin-Group/lee_child_1027557_form"/>
            <div class="inputField__border"></div>
         </div>
         <div class="prhForm__item__error prhForm__item__error--empty">
            <p>Please enter an email.</p>
         </div>
         <div class="prhForm__item__error prhForm__item__error--invalid">
            <p>Please enter a valid email address</p>
         </div>
      </div>
   </li>
   <li class="prhForm__form__submit">
      <button class="button button--rightSide validateFormSubmit">
      <span class="button__text">Sign Up</span>
      </button>
   </li>
</ul>

第二个代码块:

    <ul class="prhList prhList--hor prhForm__form">
   <li class="prhForm__form__input">
      <div class="prhForm__item inputText inputText--leftSide newsletterForm__emailInput validateInputText">
         <div class="inputField inputText__input">
            <input class="inputField__input" type="email" name="email" data-email="email_5477" value="" autocomplete="off" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
            <input type="hidden" name="adestraActionUrl" value="http://penguin-group.msgfocus.com/k/Penguin-Group/oscar_wilde_15996_form_v2"/>
            <input type="hidden" name="Source123" value="value"/>
            <div class="inputField__border"></div>
         </div>
         <div class="prhForm__item__error prhForm__item__error--empty">
            <p>Please enter an email.</p>
         </div>
         <div class="prhForm__item__error prhForm__item__error--invalid">
            <p>Please enter a valid email address</p>
         </div>
      </div>
   </li>
   <li class="prhForm__form__submit">
      <button class="button button--rightSide validateFormSubmit">
      <span class="button__text">Sign Up</span>
      </button>
   </li>
</ul>

它按照我的意愿发送点击事件，但是客户端希望我传递 name="adestraActionUrl"值的值，但页面上有时有两个值。

我知道如何通过执行以下操作来获取只有 1 的值:

document.getElementsByName("adestraActionUrl")[0].value

但是，我需要帮助的是动态 onClick 获取 onClick 名称值，例如，如果页面上的第一个组件获取 [0]，而第二个组件获取 [1]。

通过执行以下操作尝试来自答案的@Teemu逻辑:

var classname = document.getElementsByClassName("prhForm__form__submit");

var myFunction = function() {
    var attribute = this.closest('ul').querySelector('input[name="adestraActionUrl"]');
    alert(attribute);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

不幸的是，它发出如下警报:

[object HTMLInputElement]

Answer 1

按钮点击处理程序函数中的

this.closest('ul').querySelector('input[name="adestraActionUrl"]') 在按钮所在的同一“表单”中查找输入被放置。 this 指的是点击监听器附加到的元素。如果您已委托(delegate)该事件，请改用 event.target。

请注意，您需要在 IE 中为 closest 提供一个填充，请参阅 closest在 MDN。