Target each div (same classname) and copy it's content to another div in Javascript

Question

I have multiple divs with the same classname. How do I target each div and copy its content to another div, edit the content and copy it back to its original div? Here is my code; HTML

<div id="div-editor">
    <h1>Title of div to be edited goes here</h1>
    <p>Paragraph of div to be edited goes here</p>
</div>
<div class="div-content" onclick="makeDivEditable()">
    <h1>Div one title</h1>
    <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div two title</h1>
    <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div three</h1>
    <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div four title</h1>
    <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

JavaScript

function makeDivEditable(){
  var divContent = document.getElementsByClassName('div-content');
  var divEditor = document.getElementById('div-editor');
  divEditor.innerHTML = divContent[0].innerHTML;
  divEditor.contentEditable = true;
}

This code only affect the first div (div one) how do I make it affect the other divs too? I want it in a way that if I click on any of the div, its content should be copied to the div-editor. Once I finish editing, It should be copied back to it's original div.

Answer 1

I would do below:

let currentEditingNode;
const defaultEditingNodeContent = document.getElementById('div-editor').innerHTML;

window.makeDivEditable = function makeDivEditable(e = window.event){
  var divContent = (e.target || e.srcElement).parentElement;
  var divEditor = document.getElementById('div-editor');
  divEditor.innerHTML = divContent.innerHTML;
  divEditor.contentEditable = true;
  currentEditingNode = divContent;
}

window.submitEdit = function submitEdit() {
  if (currentEditingNode) {
       var divEditor = document.getElementById('div-editor');
       currentEditingNode.innerHTML = divEditor.innerHTML;
       divEditor.contentEditable = false;
       divEditor.innerHTML = defaultEditingNodeContent;
  }
}

<div id="div-editor">
    <h1>Title of div to be edited goes here</h1>
    <p>Paragraph of div to be edited goes here</p>
</div>
<button id="submit-edit" onclick="submitEdit()">submit edit</button>
<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div one title</h1>
    <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div two title</h1>
    <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div three</h1>
    <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable(event)">
    <h1>Div four title</h1>
    <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

You can play with it!

Note that I pass event to the inline event handlers, that contain the being clicked target element. Since you want to edit the whole parent div, I needed to select the ancestor of clicked element. Note that it is possible that the element returned in event could be something else. To be ideal I would check if the class name div-content matches (e.target || e.srcElement).parentElement before copying the content

Answer 2

use textarea not a div

var divs;
var cnt;
var divEditor;
function makeDivEditable(){

divs = document.getElementsByClassName('div-content');

for(let i=0;i<divs.length;i++){   
   if(event.target == divs[i].getElementsByTagName('h1')[0]  ){
    cnt = i;  
    console.log(event.target.innerHTML);
    divEditor = document.getElementById('div-editor');
    divEditor.value = event.target.innerHTML;
    console.log(cnt);
        }}
  
}

function myUpdate(){
   var text = document.getElementById('div-editor').value;
   divs[cnt].getElementsByTagName('h1')[0].innerHTML = text;
   cnt=0;
}

textarea{
width:100%;}

<textarea id="div-editor" onchange="myUpdate()">
    <h1>Title of div to be edited goes here</h1>    
</textarea>

<textarea id="div-editor2" onchange="myUpdate()">
    <p>Paragraph of div to be edited goes here</p>  
</textarea>


<div class="div-content" onclick="makeDivEditable()">
    <h1>Div one title</h1>
    <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div two title</h1>
    <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div three</h1>
    <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content" onclick="makeDivEditable()">
    <h1>Div four title</h1>
    <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

Answer 3

Why not use the onclick event handler, rather than adding it as an attribute in the DOM? Then, use the event object that is provided to the event handler.

<div id="div-editor">
  <h1>Title of div to be edited goes here</h1>
  <p>Paragraph of div to be edited goes here</p>
</div>
<div class="div-content">
  <h1>Div one title</h1>
  <p>Copy the content of div ONE and make it editable in the div editor</p>
</div>

<div class="div-content">
  <h1>Div two title</h1>
  <p>Copy the content of div TWO and make it editable in the div editor</p>
</div>

<div class="div-content">
  <h1>Div three</h1>
  <p>Copy the content of div THREE and make it editable in the div editor</p>
</div>

<div class="div-content">
  <h1>Div four title</h1>
  <p>Copy the content of div FOUR and make it editable in the div editor</p>
</div>

let content_divs = new Array(...document.getElementsByClassName("div-content"));
content_divs.forEach((div) => {
  div.onclick = makeDivEditable;
});
function makeDivEditable(e) {
  let divEditor = document.getElementById("div-editor");
  divEditor.innerHTML=e.target.innerHTML;
}

More info: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event