聊天框发送

最新推荐文章于 2022-04-18 20:57:11 发布

森屿Z

最新推荐文章于 2022-04-18 20:57:11 发布

阅读量196

点赞数 1

分类专栏：原生js 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/m0_46088512/article/details/120338751

版权

原生js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
   
    <div></div>
    聊天框：<input type="text" value=""><button>发送</button>
    <script>
        // 点击发送按钮 将输入框的内容添加到div中 清空输入框
        //1.获取元素 input button div
        var inp = document.getElementsByTagName('input')[0];
        var div = document.getElementsByTagName('div')[0];
        var btn = document.getElementsByTagName('button')[0];
        console.log(inp,btn,div);
        //2.加事件
        btn.onclick = function() {
            // 1.获取输入框的内容 元素.value
            var txt = inp.value; 
            console.log(txt);
            //2.将输入框的内容输入到div中
            div.innerHTML += '聊天框: '+ txt +'</br>';
            //3.清空输入框 将输入框的值变成空字符串 null
            inp.value = null;    
        }
    </script>
</body>
</html>