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)
})
console.log(sep);
y unconsole.log(septemberEntry);
debajo de la declaración de cada uno para verificar la constitución de esos elementos.