Home >Web Front-end >Front-end Q&A >How to leave a message in javascript

How to leave a message in javascript

藏色散人
藏色散人Original
2022-01-18 14:37:343247browse

How to implement messages in javascript: 1. Create an HTML sample file and enter the input tag; 2. Enter the script tag; 3. Implement it through the js code "oPostBtn.onclick = function(){...}" Just leave a message.

How to leave a message in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to leave a message in javascript?

JS native writing to implement the message board function

implementation The function of this message board is relatively simple, so let’s show the renderings first:
How to leave a message in javascript
Realize the content of user messages and the specific time of messages.

<script>

	window.onload = function(){
		
		var oMessageBox = document.getElementById("messageBox");
		var oInput = document.getElementById("myInput");
		var oPostBtn = document.getElementById("doPost");
		
		oPostBtn.onclick = function(){
			if(oInput.value){
				//写入发表留言的时间
				var oTime = document.createElement("p");
				oTime.className = "time";
				var myDate = new  Date();
				oTime.innerHTML = myDate.toLocaleString();
				oMessageBox.appendChild(oTime);
				
				//写入留言内容
				var oMessageContent = document.createElement("p");
				oMessageContent.className = "message_content";
				oMessageContent.innerHTML = oInput.value;
				oInput.value = "";
				oMessageBox.appendChild(oMessageContent);
			}
			
		}
		
	}

</script>

Catch the content by getting the input focus event of the input, and pass it to the p of the message board for display.

<body>
	<div class="content">
        <div class="title">用户留言</div>
        <div class="message_box" id="messageBox"></div>
        <div><input id="myInput" type="text" placeholder="请输入留言类容"><button id="doPost">提交</button></div>
    </div>
</body>

Recommended study: "js Basic Tutorial"

The above is the detailed content of How to leave a message in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn