Javascript window.onload change text of each id by targeting-CodePudding

I have this code and want to change text of each id when window loaded by targeting

function change_text() {
  const incList = document.querySelectorAll("[id ^=\'inc_\']");
  [].forEach.call(incList, function() {
    const tID = this.getAttribute("target");
    document.getElementById("inc_"   tID).innerText  = tID;
  });
}
window.onload = change_text;

<div id="inc_1" target="1">111</div>
<div id="inc_2" target="2">222</div>
<div id="inc_3" target="3">333</div>
<div id="inc_4" target="4">444</div>
<div id="inc_5" target="5">555</div>

But it doesn't work. Help, please!

CodePudding user response：

forEach doesn't bind this unless you provide a thisArg. You should instead use the first parameter passed to the callback function to reference the element.

FYI, the NodeList returned by querySelectorAll() provides its own forEach() method

function change_text() {
  // no need to escape the single-quotes
  document.querySelectorAll("[id^='inc_'][target]").forEach((el) => {
    const tId = el.getAttribute("target");

    // Safely append the new content
    document.getElementById(`inc_${tId}`)?.append(" ", tId);
  });
}
window.onload = change_text;

<!-- demonstrating different element targets -->
<div id="inc_1" target="2">111</div>
<div id="inc_2" target="3">222</div>
<div id="inc_3" target="4">333</div>
<div id="inc_4" target="5">444</div>
<div id="inc_5" target="1">555</div>

<!-- demonstrating no matching target -->
<div id="inc_6" target="does not exist">No target</div>

CodePudding user response：

First, this isn't bind on callback function in forEach.

You just need to put the parameter in callback function in forEach

function change_text() {
  const incList = document.querySelectorAll("[id ^=\'inc_\']");
  [].forEach.call(incList, function(element) {
    const tID = element.getAttribute("target");
    document.getElementById("inc_"   tID).innerText  = tID;
  });
}
window.onload = change_text;

<div id="inc_1" target="1">111</div>
<div id="inc_2" target="2">222</div>
<div id="inc_3" target="3">333</div>
<div id="inc_4" target="4">444</div>
<div id="inc_5" target="5">555</div>

CodePudding user response：

Several problems with this so I'll just mention in the comments.

function change_text() {
  const incList = document.querySelectorAll("[id ^=inc_]"); // no need to use regex
  incList.forEach(div => { // run forEach on your nodelist created above
    // const tID = this.getAttribute("target");
    // document.getElementById("inc_"   tID).innerText  = tID; // You already have the div in the loop
    div.innerText = div.dataset.target;
  });
}
window.onload = change_text;

<div id="inc_1" data-target="1">111</div> <!-- avoid creating custom attributes like that, use data-attributes instead -->
<div id="inc_2" data-target="2">222</div>
<div id="inc_3" data-target="3">333</div>
<div id="inc_4" data-target="4">444</div>
<div id="inc_5" data-target="5">555</div>

CodePudding user response：

Please rewrite like this

function change_text() {
   let seed = this;
   const incList = document.querySelectorAll("[id ^=\'inc_\']");
   [].forEach.call(incList, function() {
      const tID = seed.getAttribute("target");
      document.getElementById("inc_"   tID).innerText  = tID;
  });

}