0

O código abaixo cria novos input e envia os valores para a textarea, como o numero de input é indefinido foi preciso fazer um looping para pegar os valores através do name, ele funciona normalmente se for apenas <li>${inp1[i].value.trim()}</li>, porém eu percebi que precisaria adicionar alguns outros elementos como <div>, <span> e o ul que fosse estático e fora do looping, e também precisei adicionar uma segunda lista com valores diferentes, como sei muito pouco de javascript apanhei bastante e não consegui nada.

O resultado no textarea ficaria mais ou menos assim:

<div>
<ol>
<!-- Os valores do primeiro input aqui -->
</ol>
</div>
<div>
<ul>
<!-- Os valores do segundo input aqui -->
</ul>
</div>

let cont = 1;
document.getElementById("add1").onclick = function clone() {
  let container = document.getElementById("saida1");  
  let tempLinha = document.querySelector('#template1');
  let clonar = document.importNode(tempLinha.content, true); 
  
  const label = clonar.querySelector("label");
  label.htmlFor = cont;
  // label.textContent = "Primeiro " + (cont) + ":";  caso eu precise
  clonar.querySelector("input").className = cont;
  
  container.appendChild(clonar);
  cont++;
}
document.getElementById("del1").onclick = function del() {
    document.querySelector('#saida1 #linha1:last-child').remove();
};

// -----------------------------------------

let cont2 = 1;
document.getElementById("add2").onclick = function clone2() {
  let container2 = document.getElementById("saida2");  
  let tempLinha2 = document.querySelector('#template2'); 
  let clonar2 = document.importNode(tempLinha2.content, true);
  
  const label2 = clonar2.querySelector("label");
  label2.htmlFor = cont2;
  // label2.textContent = "Segundo " + (cont2) + ":";  caso eu precise
  clonar2.querySelector("input").className = cont2;
  
  container2.appendChild(clonar2);
  cont2++;
}
document.getElementById("del2").onclick = function del() {
    document.querySelector('#saida2 #linha2:last-child').remove();
};

// ---------------------------------------

document.getElementById("concluir").onclick = function resultado() {

  var inp1 = document.getElementsByName("inp1");
  var res = document.getElementById("resultado");
  res.value = "";
  
  for (var i = 0; i < inp1.length; i++) {
    if (inp1[i].value.trim() != '') {
      res.value += "<div><p><span>Alguma coisa</span></p></div>\n<ul>\n" + `<li>${inp1[i].value.trim()}</li>` + "</ul>" + "<div><p><span>Alguma coisa</span></p>" 
      // adicionei aqui só como exemplo mesmo
    }
  }
};
<div class="container">
<div class="linha" id="linha1"><div class="coluna1"><label for="01">Primeiro:</label></div><div class="coluna2"><input name="inp1" type="text"/></div>
</div>
<div id="saida1"></div>
<div class="linha">
<div class="botoes">
<button id="add1">ADICIONAR</button>
<button id="del1">DELETAR</button>
</div>
</div>
</div>
<div class="container">
<div class="linha" id="linha2"><div class="coluna1"><label for="01">Segundo:</label></div><div class="coluna2"><input name="inp2" type="text"/></div>
</div>
<div id="saida2"></div>
<div class="linha">
<div class="botoes">
<button id="add2">ADICIONAR</button>
<button id="del2">DELETAR</button>
</div>
<div class='botoes'>
<button id='concluir'>CONCLUIR</button>
</div>
<div class="linha"><textarea id="resultado" readonly="readonly"></textarea>
</div>
</div>
</div>

<!-- template 1 -->
<template id="template1">
<div class="linha" id="linha1"><div class="coluna1"><label for="0">Primeiro:</label></div><div class="coluna2"><input name="inp1" class="0" type="text"/></div>
</div>
</template>
<!-- template 2 -->
<template id="template2">
<div class="linha" id="linha2"><div class="coluna1"><label for="0">Segundo:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
</template>

0

1 Resposta 1

1

Explicação no código:

let cont = 1;
document.getElementById("add1").onclick = function clone() {
  let container = document.getElementById("saida1");  
  let tempLinha = document.querySelector('#template1');
  let clonar = document.importNode(tempLinha.content, true); 
  
  const label = clonar.querySelector("label");
  label.htmlFor = cont;
  // label.textContent = "Primeiro " + (cont) + ":";  caso eu precise
  clonar.querySelector("input").className = cont;
  
  container.appendChild(clonar);
  cont++;
}
document.getElementById("del1").onclick = function del() {
    document.querySelector('#saida1 #linha1:last-child').remove();
};

// -----------------------------------------

let cont2 = 1;
document.getElementById("add2").onclick = function clone2() {
  let container2 = document.getElementById("saida2");  
  let tempLinha2 = document.querySelector('#template2'); 
  let clonar2 = document.importNode(tempLinha2.content, true);
  
  const label2 = clonar2.querySelector("label");
  label2.htmlFor = cont2;
  // label2.textContent = "Segundo " + (cont2) + ":";  caso eu precise
  clonar2.querySelector("input").className = cont2;
  
  container2.appendChild(clonar2);
  cont2++;
}
document.getElementById("del2").onclick = function del() {
    document.querySelector('#saida2 #linha2:last-child').remove();
};

// ---------------------------------------

document.getElementById("concluir").onclick = function resultado() {

  var inp1 = document.getElementsByName("inp1");
  var inp2 = document.getElementsByName("inp2");
  var res = document.getElementById("resultado");
  res.value = "";
  
  //Inicia o html
  res.value += `
    <div>
      <ol>
        <!-- Os valores do primeiro input aqui -->
  `;
  
  //Adiciona os primeiros
  for (var i = 0; i < inp1.length; i++) {
    if (inp1[i].value.trim() != '') {
      res.value += `<li>${inp1[i].value.trim()}</li>`
    }
  }
  
  //Continua o html
  res.value += `
      </ol>
    </div>
    <div>
      <ul>
        <!-- Os valores do segundo input aqui -->
  `;
  
  //Adiciona os segundos
  for (var i = 0; i < inp1.length; i++) {
    if (inp1[i].value.trim() != '') {
      res.value += `<li>${inp1[i].value.trim()}</li>`
    }
  }
  
  //Termina o html
  res.value += `
      </ul>
    </div>
  `;
};
<div class="container">
<div class="linha" id="linha1"><div class="coluna1"><label for="01">Primeiro:</label></div><div class="coluna2"><input name="inp1" type="text"/></div>
</div>
<div id="saida1"></div>
<div class="linha">
<div class="botoes">
<button id="add1">ADICIONAR</button>
<button id="del1">DELETAR</button>
</div>
</div>
</div>
<div class="container">
<div class="linha" id="linha2"><div class="coluna1"><label for="01">Segundo:</label></div><div class="coluna2"><input name="inp2" type="text"/></div>
</div>
<div id="saida2"></div>
<div class="linha">
<div class="botoes">
<button id="add2">ADICIONAR</button>
<button id="del2">DELETAR</button>
</div>
<div class='botoes'>
<button id='concluir'>CONCLUIR</button>
</div>
<div class="linha"><textarea id="resultado" readonly="readonly"></textarea>
</div>
</div>
</div>

<!-- template 1 -->
<template id="template1">
<div class="linha" id="linha1"><div class="coluna1"><label for="0">Primeiro:</label></div><div class="coluna2"><input name="inp1" class="0" type="text"/></div>
</div>
</template>
<!-- template 2 -->
<template id="template2">
<div class="linha" id="linha2"><div class="coluna1"><label for="0">Segundo:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
</template>

Essa linha dentro do loop (res.value += "<div> ...) você está usando concatenação ("texto " + variavel + " texto") e interpolação (`texto ${variavel} texto`), escolha um e use só esse

1
  • sobre a concatenação, eu deixei como exemplo mesmo, Obrigado pela ajuda e pelos comentários explicando o que foi alterado
    – Mark Vaaz
    Commented 7/08/2018 às 15:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .