Question 284643 in Html Question posted in
Some basic documentation can be found here.

Html – How to use a loop to copy innerText from one group of elements to another?

How to use a for loop for document.getElementById to copy multiple by one click of the submit button?

In the ID section:

  • a1 copy to b1
  • a2 copy to b2
  • a3 copy to b3
  • a4 copy to b4
function transferData() {
  // Get the content of the first blockquote
  var content1 = document.getElementById('a1').innerText;

  // Set the content of the second blockquote
  document.getElementById('b1').innerText = content1;
}
first
<blockquote contenteditable="true" id="a1"><p>text1</p></blockquote>
<blockquote contenteditable="true" id="a2"><p>text2</p></blockquote>
<blockquote contenteditable="true" id="a3"><p>text3</p></blockquote>
<blockquote contenteditable="true" id="a4"><p>text3</p></blockquote>

second
<blockquote contenteditable="true" id="b1"><p></p></blockquote>
<blockquote contenteditable="true" id="b2"><p></p></blockquote>
<blockquote contenteditable="true" id="b3"><p></p></blockquote>
<blockquote contenteditable="true" id="b4"><p></p></blockquote>

<button type="button" onclick="transferData()">Submit</button>
Tags:

2

Answers


  1. 0

    Assuming I’ve understood your goal correctly, then the simplest way to achieve this would be to wrap each set of blockquote elements in a container. You can then relate them directly to each other by index. This will remove the need to have any other identifiers on them.

    Pros: lightweight HTML which requires no knowledge of JS implementation. Simple logic.
    Cons: requires the same number of source elements as target, so could be broken by a careless update to the HTML.

    const sources = document.querySelectorAll('.source > blockquote');
const targets = document.querySelectorAll('.target > blockquote');

document.querySelector('#copy').addEventListener('click', () => {
  sources.forEach((el, i) => targets[i].innerText = el.innerText);
});
    <div class="source">
  first
  <blockquote contenteditable="true"><p>text1</p></blockquote>
  <blockquote contenteditable="true"><p>text2</p></blockquote>
  <blockquote contenteditable="true"><p>text3</p></blockquote>
  <blockquote contenteditable="true"><p>text4</p></blockquote>
</div>
<div class="target">
  second
  <blockquote contenteditable="true"><p></p></blockquote>
  <blockquote contenteditable="true"><p></p></blockquote>
  <blockquote contenteditable="true"><p></p></blockquote>
  <blockquote contenteditable="true"><p></p></blockquote>
</div>

<button type="button" id="copy">Submit</button>

    If, for whatever reason, you did not wish to relate them by index, then you could use a data attribute to set the target by its id:

    const sources = document.querySelectorAll('.source > blockquote');

document.querySelector('#copy').addEventListener('click', () => {
  sources.forEach((el, i) => document.querySelector(el.dataset.target).innerText = el.innerText);
});
    <div class="source">
  first
  <blockquote contenteditable="true" id="s1" data-target="#t1"><p>text1</p></blockquote>
  <blockquote contenteditable="true" id="s2" data-target="#t2"><p>text2</p></blockquote>
  <blockquote contenteditable="true" id="s3" data-target="#t3"><p>text3</p></blockquote>
  <blockquote contenteditable="true" id="s4" data-target="#t4"><p>text4</p></blockquote>
</div>
<div class="target">
  second
  <blockquote contenteditable="true" id="t1"><p></p></blockquote>
  <blockquote contenteditable="true" id="t2"><p></p></blockquote>
  <blockquote contenteditable="true" id="t3"><p></p></blockquote>
  <blockquote contenteditable="true" id="t4"><p></p></blockquote>
</div>

<button type="button" id="copy">Submit</button>

    Pros: robust and extensible if you need to change the target element selectors
    Cons: additional HTML required to target the correct elements.

    Both will work, it depends on your exact use case as to which is the bext fit for you.

    Login or Signup to reply.
  2. 0

    Here, we’re getting all elements that have an ID starting with a, such as a1.

    Then, we loop over all of those and add its innerText to the blockquote that has an id of b + index, where index is the index of the loop operation. (We plus 1 since array indexes start at 0).

    This has downfalls. It assumes everything is in order, it assumes there’s an equal amount of a’s and b’s and it also assumes these elements are the only elements on the page, but it should be a good starting point.

    function transferData() {
  const els = document.querySelectorAll("blockquote[id^=a]")
  els.forEach((el, idx) => {
    document.getElementById(`b${idx + 1}`).innerText = el.innerText
  });
 }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blockquote Copy Example</title>
</head>
<body>
first
<blockquote contenteditable="true" id="a1"><p>text1</p></blockquote>
<blockquote contenteditable="true" id="a2"><p>text2</p></blockquote>
<blockquote contenteditable="true" id="a3"><p>text3</p></blockquote>
<blockquote contenteditable="true" id="a4"><p>text3</p></blockquote>
second
<blockquote contenteditable="true" id="b1"><p></p></blockquote>
<blockquote contenteditable="true" id="b2"><p></p></blockquote>
<blockquote contenteditable="true" id="b3"><p></p></blockquote>
<blockquote contenteditable="true" id="b4"><p></p></blockquote>

<button type="button" onclick="transferData()">Submit</button>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search