javascript - 在 2 个不同区域重复循环时该怎么办

Question

代码获取 input 的值并将其发送到 textarea，但是当您添加多个 title 时，这些值是在titles的结果中重复，例如title 1的DESCRIPTIONS与title 2相同>，为什么会这样？以及如何在不改变用途的情况下使其发挥作用？

Run the code in codepen.io or jsfiddle.net

---

事情是这样的:

这是应该发生的事情:

function result() {
  var inp2 = document.getElementsByName("inp2");
  var titu = document.getElementsByName("titu");
  var res = document.getElementById("result");
  res.value = "";
  
if (titu[0]) {
  for (var k = 0; k < titu.length; k++) {
    if (titu[k].value.trim() != '') {
      res.value += `<div>
<span>${titu[k].value.trim()}</span>
</div>
<ul>\n`;
      for (var j = 0; j < inp2.length; j++) {
        if (inp2[j].value.trim() != '') {
          res.value += `<li>${inp2[j].value.trim()}</li>\n`;
        }
      }
    }
  }
}else {
  console.log("test")
  res.value += `<ul>\n`;
    for (var l = 0; l < inp2.length; l++) {
      if (inp2[l].value.trim() != '') {
        res.value += `<li>${inp2[l].value.trim()}</li>\n`;
      }
    }
 }
};

// -----------------------------------------
if (document.getElementById("add2")) {
let cont2 = 1;
document.getElementById("add2").onclick = function clone2() {
  let container2 = document.getElementById("output2");  
  let tempLinha2 = document.querySelector('#template2'); 
  let clone2 = document.importNode(tempLinha2.content, true); 
  
  const label2 = clone2.querySelector("label");
  label2.htmlFor = cont2;
  clone2.querySelector("input").className = cont2;
  
  container2.appendChild(clone2);
  cont2++;
};
document.getElementById("del2").onclick = function del2() {
    document.querySelector('#output2 #linha2:last-child').remove();
};
}
// ---------------------------------------
if (document.getElementById("addtit")) {
let cont3 = 1;
document.getElementById("addtit").onclick = function clone3() {
  let container3 = document.getElementById("output2");  
  let tempLinha3 = document.querySelector('#template3');
  let clone3 = document.importNode(tempLinha3.content, true); 
  
  const label3 = clone3.querySelector("label");
  label3.htmlFor = cont3;
  clone3.querySelector("input").className = cont3;
  
  container3.appendChild(clone3);
  cont3++;
  document.getElementById('add2').id = 'add3';
  document.getElementById('del2').id = 'del3';
};
document.getElementById("deltit").onclick = function deltit() {
    document.querySelector('#output2 #alg:last-child').remove();
    document.getElementById('add3').id = 'add2';
    document.getElementById('del3').id = 'del2';
};
}
// -----------------------------------------
if (document.getElementById("add3")) {
let cont4 = 1;
document.getElementById("add3").onclick = function clone4() {
  let container4 = document.getElementById("output3");  
  let tempLinha4 = document.querySelector('#template2');
  let clone4 = document.importNode(tempLinha4.content, true); 
  
  const label4 = clone4.querySelector("label");
  label4.htmlFor = cont4;
  clone4.querySelector("input").className = cont4;
  
  container4.appendChild(clone4);
  cont4++;
};
document.getElementById("del3").onclick = function del4() {
  document.querySelector('#output3 #linha2:last-child').remove();
};
}

<div class="container">
<button id="addtit">+ TITLE</button>
<button id="deltit">- TITLE</button>
<button id="add2">+ DESCRIPTION</button>
<button id="del2">- DESCRIPTION</button>
<div id="output2"></div>
<div class='botoes'>
<button onclick="result()" id='done'>DONE</button>
</div>
<div class="header"><span class="title">RESULT</span>
</div>
<div class="linha"><textarea id="result"></textarea>
</div>
</div>
  

<!-- template 2 -->
<template id="template2">
<div class="linha" id="linha2"><div class="coluna1"><label for="0">DESCRIPTION:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
</template>
<!-- template 3 -->
<template id="template3">
<div id="alg">
<div class="linha"><div class="coluna1"><label for="0">TITLE:</label></div><div class="coluna2"><input name="titu" class="0" type="text"/></div>
</div>
<div class="linha" id="linha3"><div class="coluna1"><label for="0">DESCRIPTION:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
<div id="output3"></div>
</div>
</template>

Answer 1

好的。这是因为函数结果中的这部分代码:

if (titu[0]) {
  for (var k = 0; k < titu.length; k++) {
    if (titu[k].value.trim() != '') {
      res.value += `<div>
        <span>${titu[k].value.trim()}</span>
        </div>
        <ul>\n`;
      for (var j = 0; j < inp2.length; j++) {
        if (inp2[j].value.trim() != '') {
         res.value += `<li>${inp2[j].value.trim()}</li>\n`;
        }
      }
    }
  }
}

您的标题具有相同的名称:'titu'，并且您的描述具有相同的名称:'inp2'，
并且您有两个嵌套循环，对于每个标题，循环描述，结果如您所见.
最好更改您的代码并创建不同的名称和 ID
顺便一提。如果你坚持不改变你的代码，你应该对它们都使用一个循环，就像这段代码

if (titu[0]) {
  for (var k = 0; k < titu.length; k++) {
    if (titu[k].value.trim() != '') {
      res.value += `<div>
        <span>${titu[k].value.trim()}</span>
        </div>
        <ul>\n`;
        if (inp2[k].value.trim() != '') {
         res.value += `<li>${inp2[k].value.trim()}</li>\n`;
      }
    }
  }
}

更新
对于每个title有更多description的情况，需要修改Title+和Description+的onClick方法的代码，添加的title和它的description必须有相同的parent，这样就可以解决问题了. (假设我已经说过的 parent 有类名“ parent ”)

function result() {
    var parents = document.querySelectorAll(".parent")
    parents.forEach(function(parent){
       var title = parent.querySelector("titu");
       var descriptions = parent.querySelectorAll("inp2");
       var res = document.getElementById("result");
       if (title.value.trim() != '') {
           res.value += `<div>
           <span>${title.value.trim()}</span>
           </div>
           <ul>\n`;
       }
       descriptions.forEach(function(inp2){
          if (inp2.value.trim() != '') {
             res.value += `<li>${inp2.value.trim()}</li>\n`;
          }
       });
    }); 
}

请注意，此代码可以在修改 Title+ 和 Description+ 事件并将具有类名父级的相同父级添加到标题和描述输入后工作