简单的留言板

时间 2019-11-16

标签简单留言板繁體版

原文原文链接

制做一个简单的留言板，用户在输入框中输入内容，提交，而后内容显如今box里面javascript

依然首先须要获取到输入框，提交按钮，box；css

而后给提交按钮设置点击事件；html

获取输入框的内容；java

显示到box中spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{width: 100px;height: 100px;border: 1px solid #000;width: 200px}
    </style>
</head>
<body>
    <input type="text" name="" id="text1">
    <input type="button" name="" id="but" value='提交'>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload=function(){
            var text1 = document.getElementById("text1");    // 
            var but = document.getElementById("but");　　　　　//
            var box = document.getElementById("box");　　　　　//  ==>获取到输入框，提交按钮，box
            but.onclick=function(){　　　　　　　　　　　　　　　　//　==>给提交按钮设置点击事件
                var val = text1.value;　　　　　　　　　　　　　　//声明变量val等于输入框的内容
                var newText = '<p>' + val + '</p>'　　　　　　　//声明变量newText等于新的内容
                box.innerHTML = box.innerHTML + newText　　　　//box的innerHTML =之前的内容+新的内容
            }
        }
    </script>
</body>
</html>

box.innerHTML = box.innerHTML + newText：新的内容显示在老的内容下面，若是要把新的内容显示在老的内容的上面，把box.innerHTML和newText的位置换一下就好了code

box.innerHTML ='你好'。这个显示出来就是在box中出现你好，从html里面来看，是在div中生成了一个p标签，内容是”你好“，若是内容为变量，如上面代码同样，是var val = text1.value，若是写成box.innerHTML ='val'，并不能显示成获取到的内容，显示的内容仅仅是val而已htm

因此就涉及到了，字符串的拼接如：box.innerHTML =''+val+'';blog