Sallu Codes

Simple Message App using Javascript

Muhammad Salman Ali's photo
Muhammad Salman Ali
·

1 min read

<!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>
</head>
<body>

     <ul id = "messages"></ul>
     <input id = "textboxes" type="text">
     <button id ="button">Send</button>

</body>
</html>


<script>

button.addEventListener("click",function()
{
    var newMessage = document.createElement("li"); //Store element in a new variable 
    newMessage.textContent = textboxes.value; // pass the value of textbox inside the text content of this variable
    messages.appendChild(newMessage);  // append this variable to the ul whose id = messages
    textboxes.value = "";   // clears the textbox at the end
});
</script>

The li tag is used inside ordered lists(ol), unordered lists (ul), and in menu lists (menu).

So thats why I appended it in the ul.

4 simple steps :

1) Li element created and stored in a variable

2) Pass the message of the texbox inside the variable

3) Append the message in the ul tag

4) Clear the text box

JavaScriptjsmessagingHTML5CSS