（菜鳥警報）伙計們。我是一個極端的初學者，這將是我的第一個問題，所以如果有人能幫我解決這個問題，我將不勝感激。我今天剛開始學習快遞，我還不確定在哪里放什么，但我很確定這就是為什么它不能正常作業的原因。它只回傳 message = "" 并在資料庫中插入一個空白，而不是在 textarea 中鍵入的訊息。對不起菜鳥問題
const express = require('express')
const path = require('path')
const app = express()
const mysql = require("mysql")
const bodyParser = require('body-parser');
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "......",
database: "chat_database"
})
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, "public")))
app.listen(3000)
app.post('/', (req, res) => {
const data = req.body.message
console.log(data);
let sql = `INSERT INTO chats(content) VALUES (?)`
connection.query(sql, [data], (err, result) => {
if (err) throw err
console.log(result);
console.log("data has been successfully inserted into the database!");
})
})
const mainChatBlock = document.querySelector("#main-chat-block")
const mainInputArea = document.querySelector("#main-input-area")
const mainSendButton = document.querySelector("#main-send-button")
mainSendButton.addEventListener("click", () => {
let newMessage = document.createElement("div")
newMessage.innerHTML = mainInputArea.value
mainChatBlock.append(newMessage)
mainInputArea.value = ""
mainChatBlock.scrollTop = mainChatBlock.scrollHeight
})
mainInputArea.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
mainSendButton.click();
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>my chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div id="outermost-main-div">
<div id="outermost-chat-div">
<div id="main-chat-area">
<div id="main-chat-block">
</div>
</div>
<form action="/" method="post" id="outer-input-area">
<textarea name="message" id="main-input-area" placeholder=">>> Enter your message here"></textarea>
<button type="submit" id="main-send-button">Send</button>
</form>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
我想通了伙計們。原來罪魁禍首是客戶端js中的明確值 mainInputArea.value = ""
但是為了清除條目，我做了這樣的事情
顯示代碼片段
mainSendButton.addEventListener("click", () => {
let newMessage = document.createElement("div")
newMessage.innerHTML = mainInputArea.value
mainChatBlock.append(newMessage)
mainChatBlock.scrollTop = mainChatBlock.scrollHeight
setTimeout(del, 100)
})
function del() {
mainInputArea.value = ""
}轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/442443.html