0
votes

Ciblez chaque div (même nom de classe) et copiez son contenu dans un autre div en Javascript

J'ai plusieurs div avec le même nom de classe. Comment cibler chaque div et copier son contenu sur un autre div, modifier le contenu et le recopier dans son div d'origine? Voici mon code; HTML

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

JavaScript

<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>

Ce code n'affecte que le premier div (div un) comment puis-je le faire affecter les autres divs également? Je veux que si je clique sur l'un des div, son contenu doit être copié dans div-editor . Une fois que j'ai terminé l'édition, il devrait être recopié dans sa division d'origine.

javascript html arrays copy

0 commentaires

3 Réponses :

0
votes

Pourquoi ne pas utiliser le gestionnaire d'événements onclick , plutôt que de l'ajouter comme attribut dans le DOM? Ensuite, utilisez l'objet événement fourni au gestionnaire d'événements.

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;
}

<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>

Plus d'informations: https://developer.mozilla.org/en-US/ docs / Web / API / Element / click_event

1 commentaires

Il est possible de transmettre l'événement dans des écouteurs d'événements en ligne. Bien que je sois d'accord, le code js en ligne n'est pas du tout conseillé, car javascript doit être totalement dissocié du HTML

1
votes

Je ferais ci-dessous:

<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>

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;
  }
}

Vous pouvez jouer avec!

Notez que je passe event aux gestionnaires d'événements en ligne, qui contiennent l'élément cible sur lequel l'utilisateur a cliqué. Puisque vous voulez éditer le div parent entier, je devais sélectionner l'ancêtre de l'élément cliqué. Notez qu'il est possible que l'élément renvoyé dans event soit autre chose. Pour être idéal, je vérifierais si le nom de la classe div-content correspond à (e.target || e.srcElement) .parentElement avant de copier le contenu

0 commentaires

0
votes

utiliser textarea pas un div

<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>

textarea{
width:100%;}

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;
}

0 commentaires