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>