0

Hice una tabla editable que tiene como atributo CONTENTEDITABLE, el form ya envia perfectamente datos a la base de datos Firebase. La tabla no me deja mandar el dato que pongo en la celda que tiene el ID septemberEntry dándome el error: index.js:5 Uncaught TypeError: Cannot read property 'namedItem' of undefined at index:js:5 o sino que no es una función... que el value es nulo, etc, etc. Apenas sé algo de JS y honestamente no sé como resolverlo. Necesito que me haga otra colección en Firebase y me tome los datos de las celdas TD y me los guarde con su correspondiente ID. Alguna idea? Muchas gracias

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Heliconia tech</title>
                <link href="css/style.css" rel="stylesheet">
            </head>
            <!-- The core Firebase JS SDK is always required and must be listed first -->
            <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>

            <!-- TODO: Add SDKs for Firebase products that you want to use
                https://firebase.google.com/docs/web/setup#available-libraries -->
            <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
            <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>

            <script>
            // Your web app's Firebase configuration
            var firebaseConfig = {
            };
            // Initialize Firebase
            firebase.initializeApp(firebaseConfig);
            firebase.analytics();
            </script>

            <body id="body">
                <div class="container">
                    <form id="clientForm">
                        <label for="name" autofocus>Nombre:</label>
                        <input type="text" id="name"><br>

                        <label for="birthDate">Fecha de nacimiento:</label>
                        <input type="date" id="birthDate"><br>

                        <label for="baptismDate">Fecha de bautismo:</label>
                        <input type="date" id="baptismDate"><br>

                        <label for="gender">Género:</label>
                        <select id="gender">
                            <option value="man" selected>Hombre</option> 
                            <option value="woman">Mujer</option>
                        </select><br>

                        <label for="group">Grupo:</label>
                        <select id="group">
                            <option value="ungido" selected>Ungido</option> 
                            <option value="anciano">Anciano</option>
                            <option value="siervoMinisterial">Siervo Ministerial</option>
                            <option value="precursorRegular">Precursor regular</option> 
                            <option value="otrasOvejas">Otras ovejas</option>
                        </select><br>
                    <br>
                    <table id="clientTable">
                        <tr>
                            <th class="tableText">Año de servicio </th>
                            <th class="tableText">Publicaciones</th>
                            <th class="tableText">Presentación<br> de videos</td>
                            <th class="tableText">Horas</th>
                            <th class="tableText">Revisitas</th>
                            <th class="tableText">Cursos<br> bíblicas</th>
                            <th class="tableText">Notas</th>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Septiembre</th>
                            <td class="buttonBackground" contenteditable id="septemberEntry"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Octubre</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Noviembre</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Diciembre</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Enero</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Febrero</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Marzo</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Abril</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Mayo</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Junio</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Julio</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                        <tr>
                            <th contenteditable class="tableText">Agosto</th>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                            <td class="buttonBackground" contenteditable id="input"></td>
                        </tr>
                    </table><br>
                    <button id="buttonSubmit">Enviar</button>
                    </form>
                </div>
                <script src="js/index.js"></script>
            </body>
            </html>

Y este es el código JS

    var clientForm = document.getElementById('clientForm');
    var clientTable = document.getElementById('clientTable');
    var sep = clientTable.elements.namedItem('septemberEntry');

    var saveClient = (name,birthDate,baptismDate,gender,group) =>
        db.collection('Cliente').doc().set({
            name,
            birthDate,
            baptismDate,
            gender,
            group,
            septemberEntry
        })

    clientForm.addEventListener('submit', async e => {
        e.preventDefault();

        var name = clientForm['name'].value;
        var birthDate = clientForm['birthDate'].value;
        var baptismDate = clientForm['baptismDate'].value;
        var gender = clientForm['gender'].value;
        var group = clientForm['group'].value;
        var septemberEntry = sep.elements.namedItem('septemberEntry').value;   

        await saveClient(name,birthDate,baptismDate,gender,group, septemberEntry)
    })
1
  • Podrías empezar depurando los posibles elementos con error, poniendo un console.log(sep); y un console.log(septemberEntry); debajo de la declaración de cada uno para verificar la constitución de esos elementos.
    – A. Cedano
    Commented el 25 jul. 2020 a las 20:03

1 respuesta 1

0

Si he entendido bien, quieres por ejemplo recoger los valores que haya en Septiembre para mandarlos a Firebase.

Primeramente hay que señalar que namedItem()no existe para los fines que intentas usarlo.

Siguiendo el enunciado inicial, una forma simple de recoger los datos para Septiembre o para cualquier otro mes sería:

  1. Otorgar el id al tr donde estarían los datos de Septiembre.
  2. Seleccionar todos los td de esa fila. Con querySelectoAll() es relativamente fácil. Ese método te crea un array con cada td de esa fila y luego puedes leer cada valor del td, cada id o cualquier otro elemento del mismo. Cabe decir que querySelectorAll() sirve para seleccionar cualquier tipo de elementos, por cualquier tipo de selector, no solamente el id, sirve para seleccionar por clases, por nombres, por tipos de elementos, etc. Es una potente herramienta para agrupar fácilmente elementos.

Aparte de eso, estás dando el mismo id a todos los elementos. La especificación HTML indica que en un mismo documento no debería haber más de un elemento con el mismo id. Esto, aunque aparentemente no da error, será problemático al querer diferencia elementos por su id o querer operar con ellos.

Aislando el problema de Firebase y demás hice esta prueba que te puede servir. Para simplificar, puse solamente la tabla de Septiembre, pero puedes hacerlo con cualquier otro de los meses.

Otra cosa: en tu código original hay errores, hay etiquetas mal cerradas, debes corregir eso para evitar posibles problemas.

En esta prueba, al pulsar Enviar se seleccionan todas las td de Septiembre y se muestran los id y los valores de cada td. Así como lo imprimes, puedes crear con facilidad un array u otro objeto para enviarlo a Firebase. Es cuestión de adaptarlo en tu contexto. Espero te sirva.

var clientForm = document.getElementById('clientForm');
var clientTable = document.getElementById('clientTable');
var rowSeptember = clientTable.querySelectorAll('#septemberEntry td');

document.getElementById("buttonSubmit").addEventListener('click', function(e) {
  e.preventDefault();
  rowSeptember.forEach(function(td) {
    console.log(`El ID es: ${td.id} y el contenido es: ${td.textContent}`);

  });
});
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: center;
}

tr {
  outline: thin solid;
}

table,
td,
th {
  border: 1px gray solid;
}
<div class="container">
  <form id="clientForm">
    <label for="name" autofocus>Nombre:</label>
    <input type="text" id="name">

    <label for="birthDate">Fecha de nacimiento:</label>
    <input type="date" id="birthDate">

    <label for="baptismDate">Fecha de bautismo:</label>
    <input type="date" id="baptismDate">

    <label for="gender">Género:</label>
    <select id="gender">
      <option value="man" selected>Hombre</option>
      <option value="woman">Mujer</option>
    </select>

    <label for="group">Grupo:</label>
    <select id="group">
      <option value="ungido" selected>Ungido</option>
      <option value="anciano">Anciano</option>
      <option value="siervoMinisterial">Siervo Ministerial</option>
      <option value="precursorRegular">Precursor regular</option>
      <option value="otrasOvejas">Otras ovejas</option>
    </select><br>
    <br>
    <table id="clientTable">
      <tr>
        <th class="tableText">Año</th>
        <th class="tableText">Publicaciones</th>
        <th class="tableText">Videos
          <th class="tableText">Horas</th>
          <th class="tableText">Revisitas</th>
          <th class="tableText">Cursos</th>
          <th class="tableText">Notas</th>
      </tr>
      <tr id="septemberEntry">
        <th contenteditable class="tableText">Septiembre</th>
        <td class="buttonBackground" contenteditable id="td1">1</td>
        <td class="buttonBackground" contenteditable id="td2">2</td>
        <td class="buttonBackground" contenteditable id="td3">3</td>
        <td class="buttonBackground" contenteditable id="td4">4</td>
        <td class="buttonBackground" contenteditable id="td5">5</td>
        <td class="buttonBackground" contenteditable id="td6">6</td>


      </tr>
      <tr>
    </table>
    <p>* Las celdas se pueden editar.</p>
    <button id="buttonSubmit">Enviar</button>
  </form>
</div>

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.