Jascript COde / HTML / CSS Message Box

 <!DOCTYPE html>

<html>

<style>

#div1 {

  position:inline;

  border: 2px solid #dedede;

  width:200px;

  background-color: #f1f1f1;

  border-radius: 5px;

  padding: 50px;

  margin: 10px 0;

}



</style>


<body>



<p>Display the Chat Box.</p>


<button onclick="myFunction()"> CHAT </button>



<script>

var msge , msgebox, sname,div1;


function myFunction() {

   div1 = document.createElement("div");

   div1.id="div1";

  

   sname = document.createElement("INPUT");

   sname.setAttribute("type", "text");

  

  

   msge = document.createElement("TEXTAREA"); 

   msge.id="msge";

   msgebox = document.createElement("TEXTAREA");

   msgebox.rows=10;

   msgebox.id="msgebox" ;  

  

   btn = document.createElement("INPUT");

   btn.setAttribute("type", "button");

   btn.value="SEND";

   btn.id="btn";

   

  document.body.appendChild(div1); 

 

   div1.appendChild(sname); 

  div1.appendChild(msge);

  div1.appendChild(msgebox);

  div1.appendChild(btn);

   btn.addEventListener("click", send);

  }

    function send()

  {

    msgebox.append(sname.value +":" +msge.value +"\n"); 

   

  }

  

</script>


</body>

</html>


Comments

Popular posts from this blog

First HTML Program