Question

我有一个HTML文件。

<div id="parent">
  <h1 id="name">giri</h1>
  <button id="btn">Send The Name</button>
</div>

我在脚本中有一个onclick监听器，用于点击按钮。

<script type="text/javascript">

window.addEventListener('click',function(e)
        {
            e = e || window.event;
            var target = e.target || e.srcElement;
            console.log("ENTERED NAME=="+?????????); 
            console.log("value of the element clicked== "+target.innerHTML);

            console.log(target);//<-- this is the element that was clicked
        }, false);
</script>

如何在点击监听器中输入输入的名称？

Answer 1

您可以使用以下内容：

＆＃13;

window.onload = function () {
  document.querySelector("#btn").onclick = function () {
    console.log(this.parentNode.querySelector("#name").innerHTML);
  };
};

＆＃13;

<div id="parent">
  <h1 id="name">giri</h1>
  <button id="btn">Send The Name</button>
</div>

＆＃13;

如果您有多个需要上下文数据的实例，则上述代码非常有用。让我举一个例子。

＆＃13;

window.onload = function() {
  var btns = document.querySelectorAll(".btn");
  for (var i = 0; i < btns.length; i++) {
    (function(i) {
      btns[i].onclick = function() {
        console.log(this.parentNode.querySelector(".name").innerHTML);
      };
    })(i);
  }
};

＆＃13;

<div class="parent">
  <h1 class="name">giri</h1>
  <button class="btn">Send The Name</button>
</div>
<div class="parent">
  <h1 class="name">praveen</h1>
  <button class="btn">Send The Name</button>
</div>
<div class="parent">
  <h1 class="name">kumar</h1>
  <button class="btn">Send The Name</button>
</div>

＆＃13;

在onclick按钮的监听器中获取父视图的数据

1 个答案: