您的当前位置：首页正文

在控制台查看评论的内容

来源：九壹网

首先要建立一个input输入框

<body>
    <img src="D:\工坊软件\开发\jq\事件\图片\avatar.jpg">
    <input type="text" class="a1" placeholder="输入评论">
    <button id="btn">发送</button>
</body>

对于文本框进行编辑（为了好看添加一个图片，图片自选）

        img{
            width: 50px;
            height: 50px;
            float: left;
        }
        .a1{
            float:left;
            margin-left: 10px;
            height: 40px;
            border: none;
        }
        button{
            width: 50px;
            height: 45px;
            margin-left:10px ;
            background-color: dodgerblue;
            color: white;
            border: none;
            border-radius: 5px;
        }

对控制台进行操作

     const btn = document.querySelector('#btn')
     const input=document.querySelector('.a1')
     btn.addEventListener('click',function(){
        const replyText = input.value; // 获取输入框的值  
            if (replyText.trim() === '') {  
                alert('回复不能为空');  
                return;  
            }  
            console.log('发送评论:', replyText);  
            // 这里可以添加发送评论到服务器的逻辑（例如使用fetch或XMLHttpRequest）  
        });

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论</title>
    <style>
        img{
            width: 50px;
            height: 50px;
            float: left;
        }
        .a1{
            float:left;
            margin-left: 10px;
            height: 40px;
            border: none;
        }
        button{
            width: 50px;
            height: 45px;
            margin-left:10px ;
            background-color: dodgerblue;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <img src="D:\工坊软件\开发\jq\事件\图片\avatar.jpg">
    <input type="text" class="a1" placeholder="输入评论">
    <button id="btn">发送</button>
    <script>
     const btn = document.querySelector('#btn')
     const input=document.querySelector('.a1')
     btn.addEventListener('click',function(){
        const replyText = input.value; // 获取输入框的值  
            if (replyText.trim() === '') {  
                alert('回复不能为空');  
                return;  
            }  
            console.log('发送评论:', replyText);  
            // 这里可以添加发送评论到服务器的逻辑（例如使用fetch或XMLHttpRequest）  
        });  
    </script>
</body>
</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文