update

08cdbb17 · happystarkitty · f5aa3009 · 08cdbb17 · 08cdbb17 · 08cdbb17
Commit 08cdbb17 authored May 24, 2024 by happystarkitty
--- a/jquery.js
+++ b/jquery.js
--- a/page.html
+++ b/page.html
+<!doctype html>
+<html lang="en-US">
+
+<head>
+    <meta charset="utf-8">
+    <title>评论区</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="input_box" id="inputBox">
+        <h3>user name</h3>
+        <input type="text" id="userName">
+        <br>
+        <h3>comment content</h3>
+        <input type="text" id="commentContent">
+        <br>
+        <br>
+        <button name="submitButton" id="submitButton" class="submit_button">
+            提交
+        </button>
+    </div>
+    <br>
+
+    <div class="comment_box" id="comment1">
+        <h3>name</h3>
+        <div>
+            <p>第一条评论</p>
+
+            <button class="delete_button">
+                删除
+            </button>
+        </div>
+    </div>
+    <br>
+
+    <div class="comment_box">
+        <h3>name</h3>
+
+        <p>第二条评论</p>
+
+        <button class="delete_button">
+            删除
+        </button>
+
+    </div>
+    <br>
+
+    <div class="comment_box">
+        <h3>name</h3>
+        <div>
+            <p>第三条评论</p>
+
+            <button class="delete_button">
+                删除
+            </button>
+        </div>
+    </div>
+    <script src="jquery.js"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/script.js
+++ b/script.js
+const html = document.querySelector("html");
+const submitButton = document.querySelector("#submitButton");
+const userNameInput = document.querySelector("#userName");
+const commentContentInput = document.querySelector("#commentContent");
+const deleteButton = document.querySelectorAll(".deleteButton");
+let commentNumber = 0;
+
+function resetInput() {
+    userNameInput.value = "";
+    commentContentInput.value = "";
+}
+function createComment() {
+    const userName = userNameInput.value;
+    const commentContent = commentContentInput.value;
+    commentNumber = commentNumber + 1;
+
+    let comment = document.createElement("div");
+    comment.className = "comment_box";
+
+    let commentatorName = document.createElement("h3");
+    let commentatorNameText = document.createTextNode(userName);
+    commentatorName.appendChild(commentatorNameText);
+
+    let commentatorComment = document.createElement("p");
+    let commentatorCommentText = document.createTextNode(commentContent);
+    commentatorComment.appendChild(commentatorCommentText);
+
+    let deleteButton = document.createElement("button");
+    deleteButton.className = "operation_button";
+    let deleteButtonText = document.createTextNode("删除");
+    deleteButton.appendChild(deleteButtonText);
+    deleteButton.addEventListener("click", () => { html.removeChild(comment) });
+
+    comment.appendChild(commentatorName);
+    comment.appendChild(commentatorComment);
+    comment.appendChild(deleteButton);
+    html.appendChild(comment);
+    resetInput();
+
+}
+submitButton.addEventListener("click", createComment);
+
+
+
--- a/style.css
+++ b/style.css
+.input_box {
+    border: 0.1em solid;
+    border-radius: 1em;
+    padding: 0.5em;
+    background-color: rgb(245, 241, 237);
+    /*flex: auto;*/
+    /*display: flex;*/
+}
+
+.comment_box {
+    border-left: 0.4em solid black;
+    padding: 1em;
+    color: black;
+}
+
+.submit_button {
+    border-left: 1em;
+    color: whitesmoke;
+    background-color: black;
+}
+
+.delete_button {
+    border-left: 1em;
+    color: whitesmoke;
+    background-color: black;
+}
+
+@media (hover:hover) {
+    .comment_box:hover {
+        border-left: 0.4em solid red;
+    }
+}
\ No newline at end of file