简单的评论系统【JavaScript】

这段代码实现了一个简单的评论系统,用户可以输入评论并提交,评论会显示在页面上,同时可以通过点击“删除”按钮来删除相应的评论。

实现效果:

代码:

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>评论系统</title>
		<style>
			#comments {
				margin-top: 20px;
				font-size: 12px;
			}

			.comment {
				border: 1px solid #ccc;
				margin-bottom: 10px;
				padding: 10px;
				position: relative;
			}

			.delete-btn {
				position: absolute;
				top: 5px;
				right: 5px;
				background-color: red;
				color: white;
				border: none;
				cursor: pointer;
			}
		</style>
	</head>
	<body>

		<h1>发表评论</h1>
		<textarea id="commentInput" placeholder="请输入评论..." rows="5" cols="40"></textarea><br>
		<button id="submitComment">提交评论</button>
		<div id="comments"></div>

		<script>
			document.getElementById('submitComment').addEventListener('click', function() {
				const commentInput = document.getElementById('commentInput');
				const commentText = commentInput.value.trim();

				if (!commentText) {
					return alert('评论不能为空!');
				}

				// 创建评论元素
				const commentDiv = document.createElement('div');
				commentDiv.className = 'comment';
				commentDiv.textContent = commentText;

				// 添加删除按钮
				const deleteBtn = document.createElement('button');
				deleteBtn.className = 'delete-btn';
				deleteBtn.textContent = '删除';
				deleteBtn.onclick = function() {
					commentsDiv.removeChild(commentDiv);
				};
				commentDiv.appendChild(deleteBtn);

				// 获取评论区元素
				const commentsDiv = document.getElementById('comments');
				commentsDiv.prepend(commentDiv); // 使用 prepend 插入到最前面

				// 清空输入框
				commentInput.value = '';
			});
		</script>
	</body>
</html>

部分代码解析:

document.getElementById('submitComment').addEventListener('click', function() {
				const commentInput = document.getElementById('commentInput');
				const commentText = commentInput.value.trim();

				if (!commentText) {
					return alert('评论不能为空!');
				}

				// 创建评论元素
				const commentDiv = document.createElement('div');
				commentDiv.className = 'comment';
				commentDiv.textContent = commentText;

				// 添加删除按钮
				const deleteBtn = document.createElement('button');
				deleteBtn.className = 'delete-btn';
				deleteBtn.textContent = '删除';
				deleteBtn.onclick = function() {
					commentsDiv.removeChild(commentDiv);
				};
				commentDiv.appendChild(deleteBtn);

				// 获取评论区元素
				const commentsDiv = document.getElementById('comments');
				commentsDiv.prepend(commentDiv); // 使用 prepend 插入到最前面

				// 清空输入框
				commentInput.value = '';
			});

这段 JavaScript代码 ,用于处理用户的评论输入和展示。以下是逐步解析:

  1. 事件监听

    document.getElementById('submitComment').addEventListener('click', function() {
    

    当用户点击 ID 为 submitComment 的按钮时,会触发这个事件监听器。

  2. 获取输入内容

    const commentInput = document.getElementById('commentInput');
    const commentText = commentInput.value.trim();
    

    这两行代码获取 ID 为 commentInput 的输入框,并获取用户输入的文本,去除前后空格。

  3. 空输入检查

    if (!commentText) {
        return alert('评论不能为空!');
    }
    

    如果用户没有输入任何评论,会弹出一个警告提示,并停止执行后面的代码。

  4. 创建评论元素

    const commentDiv = document.createElement('div');
    commentDiv.className = 'comment';
    commentDiv.textContent = commentText;
    

    创建一个新的 div 元素,设置其类名为 comment,并将用户的评论文本填入。

  5. 添加删除按钮

    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = function() {
        commentsDiv.removeChild(commentDiv);
    };
    commentDiv.appendChild(deleteBtn);
    

    创建一个删除按钮,设置类名和文本。为按钮添加一个点击事件,当点击时,从评论区中删除该评论。

  6. 获取评论区元素并添加评论

    const commentsDiv = document.getElementById('comments');
    commentsDiv.prepend(commentDiv);
    

    获取 ID 为 comments 的评论区,并使用 prepend 方法将新的评论插入到评论区的最前面。

  7. 清空输入框

    commentInput.value = '';
    

    最后,清空评论输入框,以便用户可以输入新的评论。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值