【发布时间】：2020-07-25 17:54:56
【问题描述】：
我用属性 CONTENTEDITABLE 制作了一个 HTML 可编辑表，每个 TD 都有一个 ID（很长的路要走，但我今天需要它，而且我只知道 JS 基础知识）来知道里面有什么信息，它被一个表单包裹。最后我有一个按钮，如果我按下它将在控制台上显示我在表单中写的信息。因此，表单部分工作正常。我想要的是，在我按下提交按钮的地方，它不仅获取表单数据，还获取写入表格内部的数据。我对PHP一无所知。我的主要目标是将所有数据存储在 Firebase 中，但首先，我想使用控制台日志对其进行测试。当我按下提交时，它说：“无法读取未定义的属性'值'”。我试图只显示 9 月之后的第一个值来测试它。如果你知道如何解决它，那就太好了。
<!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>
这是 JS 代码
var clientForm = document.getElementById('clientForm');
var clientTable = document.getElementById('clientTable');
clientForm.addEventListener('submit', 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 = clientForm['septemberEntry'].value;
console.log(name,birthDate,baptismDate,gender,group,septemberEntry)
})
【问题讨论】：
标签： javascript html json firebase dom-events