JavaScript應用：試著用JavaScript做出留言板（一）-第十四天

第 12 屆 iThome 鐵人賽

DAY 14

自我挑戰組

Html/Css3/Javascript從0開始自學系列第 14 篇

12th鐵人賽

sss86925

2020-09-14 22:22:20

5902 瀏覽

分享至

這次主要參考的書（或文章影片）是：「JavaScript資料結構及演算法實作 Loiane Groner著」/youtuber：彭彭的課程之JavaScript網頁前端工程入門/https://www.itread01.com/content/1549559192.html 這篇文章推推

前言：因為終極目標是做出一個旅遊分享網，既然類似討論/分享網站，留言板就成為了必需品，所以希望能練習做出一個留言板

以下是目前的程式碼
我希望可以讓他呈現類似dcard那樣一條一條的發言被發上去
不過目前只有雛型出來完整的功能還在摸索
想做的功能類似於上面附的文章

<!DOCTYPE  html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>留言板練習</title>
        <script>
            window.onload = function(){
                var Input = document.getElementById("myInput");
                var messageBox = document.getElementById("messageBox");
            
            function post(){
                if(Input.value){
                    var oTime = document.createElement("div");
				    oTime.className = "time";
				    var myDate = new  Date();
				    oTime.innerHTML = myDate.toLocaleString();
				    messageBox.appendChild(oTime);
				
                    var message = document.createElement("div");
                    message.className="messageX";
                    message.innerHTML=Input.value;
                    Input.value="";
                    messageBox.appendChild(message);
                }
            }
        }
        </script>
        <style>

        </style>
   
    </head>
    <body>
        <div>
            <div>使用者留言</div>
            <textarea id="messageBox"></textarea>
            <div>
                <input id="myInput" type="text" placeholder="請輸入留言類容"><button onclick="post()">提交</button>
            </div>
        </div>
    </body>
</html>

後記：今天找到了一份工讀工作，讓自己休學時不完全是個米蟲，也很謝謝老闆願意用我，不過鐵人賽上要學習也比較困難一點，只能期許自己即時無法學得很多很廣，也要馬不停蹄的一天一天學習。