簡單的留言板

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。