实现评论功能html
时间: 2023-07-12 10:06:18 浏览: 63
首先,你需要在你的网页中添加一个表单,让用户可以输入评论。例如:
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="comment">评论:</label>
<textarea id="comment" name="comment"></textarea><br>
<button type="submit">提交</button>
</form>
```
然后,你需要编写一些 JavaScript 代码来处理这个表单的提交事件,并将用户输入的评论显示在网页上。例如:
```html
<div id="comments"></div>
<script>
const form = document.querySelector('form');
const comments = document.querySelector('#comments');
form.addEventListener('submit', event => {
event.preventDefault();
const name = form.elements.name.value;
const comment = form.elements.comment.value;
const commentElement = document.createElement('div');
commentElement.innerHTML = `<strong>${name}:</strong>${comment}`;
comments.appendChild(commentElement);
form.reset();
});
</script>
```
这段代码会在表单提交时阻止默认行为(即刷新页面),然后获取用户输入的姓名和评论内容,并创建一个新的 `div` 元素来显示这个评论。最后,将这个新的 `div` 元素添加到一个带有 id 为 `comments` 的父元素中,并清空表单。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)