I’m working on exercise, a simple chat/store messages, working on localhost, but it’s not working properly. The objective is to send user and message, and store the user and messages sent with a date. Like:(11:32 @USER: Hello world).
This message data (with user,message and date) should be displayed on page, one after another.
I’m doing this with no dependencies, but I cannot seem to make that work. I will post a feedle on it, can someone help me with this?
JavaScript
x
13
13
1
let messages = document.getElementById("messages");2
let textbox = document.getElementById("textbox");3
let button = document.getElementById("button");4
let username = document.getElementById("username");5
6
button.addEventListener("keyup", function () {7
var newMessage = document.createElement("ul");8
newMessage.innerHTML = textbox.value;9
messages.appendChild(newMessage);10
textbox.value = "";11
let time = new Date();12
});13
JavaScript
1
30
30
1
<!DOCTYPE HTML>2
<html>3
<head>4
<title>Chat</title>5
<meta charset="UTF-8" />6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />7
<link rel="stylesheet" href="style.css">8
<title><b>chatbox</b></title>9
<form action="" method="get" class="web-form"></form>10
<link rel="icon" href="129663.png"/>11
</head>12
13
<body>14
15
</form>16
<h1 style="color:rgb(168, 203, 231);text-align:left;">chatbox</h1>17
<form class="flex-columns">18
<div>19
<ul id="messages"></ul>20
<label id="user" for="username"><b>Username:</b></label>21
<input name="username" type="text" name="name" id="name" required/>22
<label id="msg" for="msg"><b>Message:</b></label>23
<textarea placeholder="Type message.." name="msg" required></textarea>24
25
</div>26
<button type="submit" id="button">Send</button>27
</form>28
<script src="index.js"></script>29
</body>30
</html>Advertisement
Answer
Since the button type is submit , on click the form submits and performs its default behavior ( send a get request – effectively refreshing the page ) . To prevent this you will have to accept to add e.preventDefault() in your event handler code .
JavaScript
1
14
14
1
let messages = document.getElementById("messages");2
let textbox = document.getElementById("textbox");3
let button = document.getElementById("button");4
let username = document.getElementById("username");5
6
button.addEventListener("click", function (e) {7
e.preventDefault();8
var newMessage = document.createElement("ul");9
newMessage.innerHTML = textbox.value;10
messages.appendChild(newMessage);11
textbox.value = "";12
let time = new Date();13
});14
JavaScript
1
33
33
1
<!DOCTYPE HTML>2
<html>3
<head>4
<title>Chat</title>5
<meta charset="UTF-8" />6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />7
<link rel="stylesheet" href="style.css">8
<title><b>Web form</b></title>9
<form action="" method="get" class="web-form"></form>10
<link rel="icon" href="129663.png"/>11
</head>12
13
<body>14
15
16
<h1 style="color:rgb(168, 203, 231);text-align:left;">Web Form Chat</h1>17
<form class="flex-columns">18
<div>19
<ul id="messages"></ul>20
<label id="user" for="username"><b>Username:</b></label>21
<input name="username" type="text" name="name" id="name" required/>22
<label id="msg" for="msg"><b>Message:</b></label>23
<textarea id="textbox" placeholder="Type message.." name="msg" required></textarea>24
25
</div>26
<button type="submit" id="button">Send</button>27
</form>28
<div id="messages">29
30
</div>31
<script src="index.js"></script>32
</body>33
</html>