Код получает значения input
и отправляет их в textarea
, но когда вы добавляете более одного title
, значения повторяются в результате titles
, например, DESCRIPTIONS
из title 1
такие же, как в 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.info("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>
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
Хорошо. это потому, что эта часть кода в результате функции:
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',
, и у вас есть два вложенных цикла для каждого заголовка, цикл по описанию, и это результат, как вы видите.
лучше изменить свой код и сделать другие имена и идентификаторы
Кстати. если вы настаиваете на том, чтобы не менять свой код, вы должны использовать один цикл для них обоих, как этот код
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`;
}
}
}
}
ОБНОВИТЬ
в случае более подробного описания для каждого заголовка вам необходимо изменить код методов onClick для Title + и Description +, добавленный заголовок и все его описание должны иметь один и тот же родительский элемент, и после этого можно решить проблему, подобную этой . (при условии, что родитель, о котором я уже говорил, имеет имя класса «родительский»)
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 + и добавления того же родителя с родителем имени класса во входные данные заголовка и описания.