Question

当我单击h1 tag之一时，无法更改p tags。我在遍历p tags，提取值并用该数据值更改标题时遇到麻烦。到目前为止，我只收到错误“无法读取value的属性undefined。

window.addEventListener('load', function() {
  'use strict';

  const p_array = document.getElementsByTagName("p");
  const count = p_array.length;

  //loop through a list of elements.
  for (let i = 0; i < count; i++) {

    const p = p_array[i];

    p.addEventListener("click", function() {

      const tag = p.getElementsByTagName('p');

      document.getElementById("title").innerHTML = tag.dataset.value;

    })
  }
});

<h1 id="title">Title</h1>
<p data-value="One">Click to change title to One</p>
<p data-value="Two">Click to change title to Two</p>
<p data-value="Three">Click to change title to Three</p>

Answer 1

getElementsByTagName返回节点的集合。如果您对当前的p感兴趣，只需使用this或事件目标：

p.addEventListener("click", function (e) {
  const tag = e.target
  // or const tag = this

  document.getElementById("title").innerHTML = tag.dataset.value;
})

Answer 2

window.addEventListener('load', function() {
  'use strict';

  const p_array = document.getElementsByTagName("p");
  const count = p_array.length;

  //loop through a list of elements.
  for (let i = 0; i < count; i++) {

    const p = p_array[i];

    p.addEventListener("click", function() {
      // Here the `this` keyword refers to the element that is clicked
      document.getElementById("title").innerHTML = this.dataset.value;

    })
  }
});

<h1 id="title">Title</h1>
<p data-value="One" data-doo="foo">Click to change title to One</p>
<p data-value="Two">Click to change title to Two</p>
<p data-value="Three">Click to change title to Three</p>

Answer 3

第1步：

使用Array.from()从getElementsByTagName()返回的HTMLCollection中构建一个数组。

第2步：

在每个元素上设置一个事件侦听器，并使用单击的元素data-value来更改#title

window.addEventListener('load', function() {
    'use strict';
    
    Array.from(document.getElementsByTagName("p")).forEach(ele => {
        ele.addEventListener("click", function() {
            document.getElementById("title").innerHTML = ele.dataset.value;
        })
    });
});

<h1 id="title">Title</h1>
<p data-value="One">Click to change title to One</p>
<p data-value="Two">Click to change title to Two</p>
<p data-value="Three">Click to change title to Three</p>

Answer 4

window.addEventListener('load', function() {
  'use strict';

  const p_array = document.getElementsByTagName("p");
  const count = p_array.length;

  //loop through a list of elements.
  for (let i = 0; i < count; i++) {

    const p = p_array[i];

    p.addEventListener("click", function() {

      //const tag = p.getElementsByTagName('p');

      document.getElementById("title").innerHTML = p.dataset.value;

    })
  }
});

<h1 id="title">Title</h1>
<p data-value="One">Click to change title to One</p>
<p data-value="Two">Click to change title to Two</p>
<p data-value="Three">Click to change title to Three</p>

Answer 5

这可以解决问题（仅适用于javascript） p.getAttribute（'data-value'）;返回指定属性的值

window.addEventListener('load', function() {
    'use strict';

    const p_array = document.getElementsByTagName("p");
    const count = p_array.length;

    //loop through a list of elements.
    for (let i = 0; i < count; i++) {

        const p = p_array[i];

        p.addEventListener("click", function(){

          alert(p.getAttribute('data-value'));
            document.getElementById("title").innerHTML = p.getAttribute('data-value');

        });
    }
});

在p标签上使用事件监听器

5 个答案: