0

class ListaConvidados {

   constructor() {// iniciando uma contagem
      this.qtd = 0;
      this.id = 0;
      this.edit = "";
      this.editID = 0
   }

   add() {// criando metodo  adicionar 
      // 1) ler o input do DOM[tela]
      let nome = document.getElementById("nomeConvidado").value;

      if (this.edit == true) {
         document.getElementById(this.editID).innerText = nome;
         this.edit = false;
      } else {
         // criando condições no Dom[tela]
         if (nome == "") {
            alert("DIGITE NOME DO CONVIDADO !!!!");

            this.qtd--;
         }



         else if (this.qtd == 0) {
            alert("adicionando primeiro convidado desta lista");

         }
         else if (this.qtd == 10) {
            alert(" LIMITE MAXIMO DE CONVIDADOS!!\n autorizado apenas 10 convidados neste evento.");
            this.qtd--;
         }

         // 2) ler a lista no Dom[tela]
         let lista = document.getElementById("lista");

         // 2.1 criar elemento no DOM[tela]
         let div = document.createElement("div");// criando uma tag  via JS >>  <di></div> no DOM[tela]
         div.classList.add("itemLista");// inserindo uma class no  div>>  <div class="itemlista"></div>
         div.id = "conv-" + this.id;

         let span = document.createElement("span");// criando uma <span></span> no DOM[tela]
         span.innerText = nome;// inserindo nome no <span>exemplo: Jão da silva</span>

         let imgDel = document.createElement("img");//criando uma <img> no DOM[tela]
         imgDel.src = "../listaConvidados/img/trash.svg";// inserindo um atributo dentro da img src="../listaConvidados/img/trash.svg"

         let imgEdit = document.createElement("img");//criando uma <img> no DOM[tela]
         imgEdit.src = "../listaConvidados/img/edit.svg";// inserindo um atributo dentro da img src="../listaConvidados/img/edit.svg"

         //criando o onclick="lista.excluir(conv)"
         imgDel.setAttribute("onclick", "lista.excluir('" + div.id + "')");
         // criando o onclick="lista.editar ()"
         imgEdit.setAttribute("onclick", "lista.editar('" + div.id + "')");

         // 2.2/ aninhar as tags
         div.appendChild(span);// agrupando <div id="itemLista"><span>'nome'</span></div>
         div.appendChild(imgDel); // agrupando <div id="itemLista"><span> 'nome'</span> <img src=" img/trash.svg"
         div.appendChild(imgEdit); // agrupando <div id="itemLista"><span> 'nome'</span> <img src=" img/edit.svg"

         // 2.3) inserir na lista  do DOM[tela]
         lista.appendChild(div);

         // 3) criando o contador
         this.qtd++;
         this.id++;

         this.atualizarQtd();

      }

      document.getElementById("nomeConvidado").value = "";//limpando o input nome convidado


   }
   //  atualizar o contador qtd
   atualizarQtd() {
      let labelqtd = document.getElementById("labelqtd");
      labelqtd.innerText = this.qtd;
   }

   // criando metodo excluir da lista convidados
   excluir(id) {

      let conv = document.getElementById(id);// buscando o id do convidado no DOM[tela]

      let lis = document.getElementById("lista");//acessando a lista de convidado no DOM[tela]

      lis.removeChild(conv);//excluindo convidado pelo id

      this.qtd--;// criando contador em excluir

      this.atualizarQtd();

   }
   editar(id) {
      let nome = document.getElementById(id).childNodes[0].innerText;// acessando o 'id' e inserindo um texto
      document.getElementById("nomeConvidado").value = nome;//acessando o nomeCovidado[input]e colocando valor
      this.edit = true; //validando o botao add para modo editar
      this.editID = id;
   }
}
var lista = new ListaConvidados();/**criando um objeto 'ListaConvidados' em js */
body{
    font-family: Arial, Helvetica, sans-serif;
    color: #e4cbcb;
}


.card{
    background-color: white;
    width:30%;
    margin: auto;
    margin-bottom: 13px;
    border-radius: 15px;
    text-align: center;
    padding: 15px;
box-shadow: 0px 0px 10px  gray;
}
.cardTitle{
    font-weight: bold;
    text-align: center;
    color: gray;
}
.card-form input{
    width: 100%;
    border: none;
    border-bottom: 1px solid gray;
    font-size: 12px;
    padding: 10px 3px;
}
.card-acoes button{
    border:  none;
    font-weight:900;
    padding: 15px;
    font-size: 12px;
    margin: 20px 0px 0px 0px;
    color: gray;
    border: 1px solid gray;
    border-radius: 30px;
    cursor: pointer;
    transition: .3s;
}
.card-acoes button:hover{
    background-color: gray;
    color: white;
    font-weight: 700;
    box-shadow: 0px 2px 10px gray;   
}
#lbl{
    
  font-weight: bold;
  margin-top: -5px;
    float: left;
}
.itemLista{
    color: darkcyan;
    font-weight: 900;
    text-transform: uppercase;
    padding: 10px;
}
.itemLista:hover{
    
    background-color: yellowgreen;

}
.itemLista img {
    width: 20px;
    float: right;
}
<html>

<head>
<meta charset="utf-8">
<title>Lista De Convidados</title>
<script src="../listaConvidados/listaConvidado.js"></script><!--linkando o js para o html-->
<link rel="stylesheet" href="../listaConvidados/listaConvidados.css">
</head>

<body>

    <div class="card">
        <h2  class="cardTitle"> adicionar Convidados</h2>
        <div class="card-form">
            <input type="text" id="nomeConvidado" placeholder="nome do convidado">
        </div>
        <div class="card-acoes">
            <button onclick="lista.add()" id="botaoAdd">adicionar</button>
        </div>
    </div>

    <div class="card">
        <h2 class="cardTitle">Lista de Convidados</h2>
        <label id="lbl" for="">QTD:</label>
        <div id="labelqtd"><label id="labelqtd" ></label></div>
        
        <div id="lista"></div>
           
        
    </div>
    

</body>

</html>

1 Resposta 1

0

Para editar você recupera o innerText do span que contém o nome e ao alterar você altera o innerText do div que contém o span e as imagens.

É só editar o innerText do div pelo span:

if (this.edit === true) {
  document.getElementById(this.editID).childNodes[0].innerText = nome;
  this.edit = false;
}
1
  • 1
    vlw Tiago deu certo ;👍
    – Fernando
    9/06/2020 às 1:05

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 .