1

Quiero crear varios usuarios. En mi avance he logrado clonar los nodos, cada uno con sus datos diferentes, lo que quiero hacer ahora es poder editar esa información en caso de que esté mal o simplemente se quiera modificar, pero al hacer el proceso similar a lo que hice anteriormente, la información se coloca exactamente igual en todos los nodos y no diferente para cada uno.

Intenté hacerlo similar a lo que hice en un inicio, pero se repite lo mismo en todos.

function clonacionNodos(){

var nombre = document.getElementById("modalNombre").value;
    var telefono = document.getElementById("modalTelefono").value;
nombre_usuario = document.querySelectorAll("#modalNombre");
last_nombre_usuario = nombre_usuario[nombre_usuario.length-1];
document.getElementById("capturaNombre").innerHTML = nombre;
console.log(last_nombre_usuario);
 
telefono_usuario = document.querySelectorAll("#modalTelefono");
last_telefono_usuario = telefono_usuario[telefono_usuario.length-1];
document.getElementById("capturaTelefono").innerHTML = telefono;
console.log(last_telefono_usuario);

 //Pasar al formulario de edicion de nombre
 let guardarEditNombre = document.getElementById("modalNombre").value;
 document.getElementById("inputName").value = guardarEditNombre;
 
 let guardarEditTelefono = document.getElementById("modalTelefono").value;
 document.getElementById("inputTelefono").value = guardarEditTelefono;
 
    const node = document.getElementById("elementoNodo");
    const clone = node.cloneNode(true);
    document.getElementById("contenedorElementos").appendChild(clone);
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="dark.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/03a89292db.js" crossorigin="anonymous"></script>
    <script src="chart/chart.min.js"></script>
    <title>Proyecto Morena</title>
  </head>
  <body>

    <!--MENU-->

  
<!---------------------------------->
<!--MODAL DE AGREGACION DE USUARIO-->
<!---------------------------------->
<div class="modal fade" id="modalNuevoUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content"> 
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Agregar nuevo usuario</h5>
        <button type="button" class="close btn btn-danger" data-bs-dismiss="modal" aria-label="Close" >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body form-group">
        <form>
          <div class="form-group">
            <label for="modalNombre">Nombre:</label>
            <input type="text" class="form-control" id="modalNombre" placeholder="Nombre completo del usuario">
          </div>
          <div class="form-group">
            <label for="modalTelefono">Telefono:</label>
            <input type="tel" class="form-control" id="modalTelefono" placeholder="Numero telefonico">
          </div>
          <div class="form-group">
            <label for="modalRuta">Ruta:</label>
            <input type="text" class="form-control" id="modalRuta" placeholder="Ruta del usuario">
          </div>
          <div class="form-group">
            <label for="modalLocalidad">Localidad:</label>
            <input type="text" class="form-control" id="modalLocalidad" placeholder="Municipio donde radica">
          </div>
          <div class="form-group">
            <label for="modalRFC">RFC:</label>
            <input type="text" class="form-control" id="modalRFC" placeholder="RFC">
          </div>
          <div class="form-group">
            <label for="modalBancario">Cuenta bancaria:</label>
            <input type="number" class="form-control" id="modalBancario" placeholder="Numero CLABE de cuenta interbancaria">
          </div>
          <div class="form-group">
            <label for="modalImagen">Fotografia del usuario (opcional):</label>
            <input type="file" class="form-control" id="modalImagen" accept="image/*">
          </div>
        </form>  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CANCELAR</button>
        <button type="button" class="btn btn-success"  data-bs-dismiss="modal" onclick="clonacionNodos()">GUARDAR USUARIO</button>
      </div>
    </div>
  </div>
</div>

<!--MODAL EDITAR USUARIOS-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content"> 
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Editar perfil</h5>
        <button type="button" class="close btn btn-danger" data-bs-dismiss="modal" aria-label="Close" >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body form-group">
      
          <div class="mytabs">
        <input type="radio" id="tabfree" name="mytabs" checked="checked">
        <label for="tabfree">CONVENCIDOS</label>
        <div class="tab">
          <h1>RUTA 4</h1>
          <p><input type="number">  CONVENCIDOS</p>
          <p><input type="number">  COMITES</p>
          <p><input type="number">  LLAMADAS</p>
        </div>
    
        <input type="radio" id="tabgold" name="mytabs">
        <label for="tabgold">DATOS PERSONALES</label>
        <div class="tab">
          <form style="margin-left: 50px;" class="form-group">
           
              <p>Nombre completo: <input type="text" id="inputName" class="form-control" name="nombrecompleto"></p>
              <p>Telefono: <input type="tel" id="inputTelefono" class="form-control" name="telefono"></p>
              <p>Ruta: <input type="text" id="inputRuta" class="form-control" name="ruta"></p>
              <p>Localidad: <input type="text" id="inputLocalidad" class="form-control" name="localidad"></p>
              <p>RFC: <input type="text" id="inputRFC" class="form-control" name="rfc"></p>
              <p>Cuenta bancaria: <input id="inputBancario" type="number" class="form-control" name="cuenta_bancaria"></p>
              <p>Imagen de perfil: <input type="file" class="form-control" name="imagen_perfil"></p>
        
            
          </form>
        </div>
    
      </div>
       

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CERRAR</button>
        <button type="button" class="btn btn-success">GUARDAR CAMBIOS</button>
      </div>
    </div>
  </div>
</div>
<!--........................-->
            </div> <br></div>

          <div> 
            <div id="ranking">
              <h2 style="text-align: center;">DISTRITO 34</h2>
                <div id="ranking_inicio">
                  <canvas id="miGrafica" width="400" height="200"></canvas>
              </div>
            </div>
          </div>
        </div>

        </div>

</section>


    <!--SECCION DE COT'S-->
<br>
<div class="container text-center" id="integrantes">
    <h2>COT'S (Distrito 34)</h2>
</div>

    <!--Contacto-->
    <section> 
      <div class="container border border-primary"> <br>
    <div class="album bg-light">
      <div class="container">
  
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="contenedorElementos">
          <div class="col" id="elementoNodo">
            <div class="card shadow-sm">
              <img src="img/usuario1.webp"class="bd-placeholder-img card-img-top" width="100%" height="225"><h6 id="capturaNombre">ISAAC RENE MONTES DE OCA MARAVILLA</h6></img>
  
              <div class="card-body">
                <p class="card-text" id="capturaTelefono" >0 Convencidos</p>
                <p class="card-text">0 Comites</p>
                <p class="card-text">0 Llamadas</p>
                
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button class="btn btn-warning" id="botonPerfil" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">Editar perfil</button>
                    <button type="button" class="btn btn-danger">Eliminar usuario</button>
                  </div>
                  <small class="text-muted">CACALOMACAN</small>
                </div>
              </div>
            </div>
          </div>

                      <div>
                        <div class="row aling-items-center">
                          <button class="btn btn-primary btn-lg active" role="button" aria-pressed="true" data-bs-toggle="modal" data-bs-target="#modalNuevoUsuario">AGREGAR NUEVO COT</button>
                        </div>
                      </div>
                        
                      </div>
                    </section> 

              
                
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

5
  • No uses imágenes para poner código porque no ayudan a reproducir tu error y buscarte una solución. Puedes editar la pregunta para agregar el código como texto pulsando sobre el enlace Editar que aparece en el pie de la pregunta.
    – masterguru
    Commented el 6 jul. 2022 a las 19:12
  • Listo una disculpa, es que en un inicio no podía poder código pero ya vi como, Espero y me puedas ayudar. Commented el 6 jul. 2022 a las 19:35
  • Al crear el usuario todo funciona en orden, ya que sus datos son diferentes en cada Nodo, al momento de querer editar un nodo en particular, me alteran todos y no solo el seleccionado. Commented el 6 jul. 2022 a las 19:37
  • Viendo tu código se ve facilmente el problema (que no la solución). Estas repitiendo ids de todos los elementos en cada clon, a la vez que los modificas antes de clonarlos. Por lo tanto al guardar estas modificandolos todos son iguales. No se ver una solución tal como lo tienes montado, y quizás deberias plantearte el uso de template en lugar de clonarlos así. En esta respuesta puedes intentar comprender como funcionaria con template.
    – masterguru
    Commented el 6 jul. 2022 a las 20:59
  • Clonando o no (como sugiere @masterguru), o lo que no debes es utilizar el mismo ID para dos elementos en el mismo documento. No deberías hacer eso, y pretender que el resto funcione como quieres utilizando por ejemplo getElementById. Para ello, cuando clones, cambia el id del elemento clonado y hecha mano de clases y atributos personalizados para tu uso posterior, y para identificar los input de cada nodo individual (o el propio id si tiene formato como `id="telefono_xx"', por ejemplo
    – VFG
    Commented el 7 jul. 2022 a las 9:27

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.