我目前正在将我的价值观从我的谷歌工作表整合到我的谷歌网站中。我知道，只需将谷歌表格框放入网站中也可以做到这一点，但我想通过使用谷歌应用程序脚本来改进样式。我得到以下代码：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function submitForm() {
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
google.script.run.withSuccessHandler(function() {
document.getElementById('name').value = '';
document.getElementById('message').value = '';
displayMessages(); // Refresh the message list after submission
}).withFailureHandler(function(error) {
alert("Error submitting message: " + error.message);
}).submitMessage(name, message);
}
function displayMessages() {
google.script.run.withSuccessHandler(renderMessages).getMessages(); // Calling getMessages
}
function renderMessages(data) {
const dataList = document.getElementById('dataList');
dataList.innerHTML = ''; // Clear previous data
// Handle null or unexpected data format
if (!data || !Array.isArray(data) || data.length === 0) {
const listItem = document.createElement('li');
listItem.textContent = "No messages available.";
dataList.appendChild(listItem);
return;
}
// Process each row of data
data.forEach(function(row) {
// Ensure the row is an array and has the expected length
if (Array.isArray(row) && row.length === 3) {
const listItem = document.createElement('li');
// Format the timestamp using toLocaleString
const formattedDate = new Date(row[0]).toLocaleString(); // Format the date
listItem.textContent = `${formattedDate} - ${row[1] || 'Anonymous'}: ${row[2] || 'No message'}`; // Format the message display
dataList.appendChild(listItem);
} else {
console.error("Unexpected row format:", row); // Log unexpected row formats
}
});
}
window.onload = function() {
displayMessages(); // Load messages when the page is opened
};
</script>
</head>
<body>
<h1>Message Board</h1>
<form onsubmit="submitForm(); return false;">
<label for="name">Name:</label>
<input type="text" id="name" required>
<br>
<label for="message">Message:</label>
<textarea id="message" required></textarea>
<br>
<input type="submit" value="Submit">
</form>
<h2>Messages:</h2>
<ul id="dataList"></ul>
</body>
</html>
以及以下谷歌应用程序脚本：
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function submitMessage(name, message) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const timestamp = new Date();
sheet.appendRow([timestamp, name, message]);
}
function getMessages() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = sheet.getDataRange().getValues();
// Log the raw data retrieved from the sheet
Logger.log("Raw data from sheet: " + JSON.stringify(data));
if (data.length < 1) {
// If there's no data (only header), return an empty array
return [];
}
// Remove the header row
data.shift();
// Log the data after removing the header
Logger.log("Data after removing header: " + JSON.stringify(data));
Logger.log(data);
return data;
}
我认为 code.gs 工作正常，因为输出对应于我的谷歌工作表的值。所以我的问题是，关于该问题的错误在哪里，该网站不显示该网站的值，但输入工作绝对正常。
亲切的问候。
我尝试在浏览器控制台中多次调整 html，发现错误发生在 forEach 处，因为数据为 Null，但 code.gs 返回了包含正确值的列表。
我认为渲染消息功能已关闭。