针对每个div（相同的类名）并复制它'；将内容复制到Javascript中的另一个div

我有多个具有相同类名的div。如何定位每个div并将其内容复制到另一个div，编辑内容并将其复制回其原始div？ 这是我的密码； HTML

这段代码只影响第一个div（divone），我如何使它也影响其他div？

---

我希望，如果我单击任何div，它的内容都应该复制到

div编辑器

。编辑完成后，应该将其复制回原始div。

为什么不使用

onclick

事件处理程序，而不是将其作为属性添加到DOM中？然后，使用提供给事件处理程序的事件对象

要编辑的div的标题位于此处
要编辑的div的段落位于此处

第一组标题
复制div ONE的内容并使其在div编辑器中可编辑

第二组标题
复制div TWO的内容并使其在div编辑器中可编辑

第三组
复制div THREE的内容并使其在div编辑器中可编辑

第四组标题
复制div FOUR的内容并使其在div编辑器中可编辑

let content_divs=新数组（…document.getElementsByClassName（“div content”）；
每个目录的内容分区（（分区）=>{
div.onclick=makeDivEditable；
});
函数makeDivEditable（e）{
让divEditor=document.getElementById（“div编辑器”）；
divEditor.innerHTML=e.target.innerHTML；
}

更多信息：

我会做以下几点：

let currentEditingNode；
const defaultEditingNodeContent=document.getElementById（'div-editor'）.innerHTML；
window.makeDivEditable=函数makeDivEditable（e=window.event）{
var divContent=（e.target | | e.srceelement）.parentElement；
var divEditor=document.getElementById（'div-editor'）；
divEditor.innerHTML=divContent.innerHTML；
divEditor.contentEditable=true；
currentEditingNode=divContent；
}
window.submitEdit=函数submitEdit（）{
如果（当前编辑节点）{
var divEditor=document.getElementById（'div-editor'）；
currentEditingNode.innerHTML=divEditor.innerHTML；
divEditor.contentEditable=false；
divEditor.innerHTML=defaultEditingNodeContent；
}
}

要编辑的div的标题位于此处
要编辑的div的段落位于此处

提交编辑
第一组标题
复制div ONE的内容并使其在div编辑器中可编辑

第二组标题
复制div TWO的内容并使其在div编辑器中可编辑

第三组
复制div THREE的内容并使其在div编辑器中可编辑

第四组标题
复制div FOUR的内容并使其在div编辑器中可编辑

使用文本区域而不是div

var divs；
var-cnt；
变量编辑器；
函数makeDivEditable（）{
divs=document.getElementsByClassName（'div-content'）；
for（让i=0；我可以在内联事件侦听器中传递事件。虽然我同意，但不建议使用内联js代码，因为javascript应该与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>

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