Mixing
How to save input from text field to name property in a Javascript object literal?
Clash Royale CLAN TAG#URR8PPP How to save input from text field to name property in a Javascript object literal?
assistant.parsePostParams((params) =>
let message =
name: "anon",
body: params.body,
when: new Date().toISOString()
Let me preface a little first...
This was all built in a classroom working with partners as a project for servers and clients. I think part of why the code has a lot of issues is because I've thrown my hands up in frustration at it and have just been writing anything and trying it then either not removing all of it properly or commenting it out also not properly. At one point everything worked, but am now trying to add to it. There was a spec.js we were running tests from using jasmine--node. Anyway thanks again
Also this is my first time posting so please be gentle. This isn't my complete code obviously, but I am wondering how to change the code so that "anon" can be something that is input by the user. Currently, I am using 'body' in the client and getting messages input as I want them to... sort of. But I can't figure out how to input a username and save it as the name. This is the part of the code I thought is most relevant to the issue. I have 2 main files, my client and my server, and 3 objects. So it would be sort of problematic to link everything here. Any help would be appreciated, thank you!
here is the entire index.html. its a work in progress... please dont laugh
<!DOCTYPE html>
<html lang- "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Chat</h1>
<div class="pickRoomDiv">
<button id="pickRoom">Enter Room</button>
<select>
<option title="selectRoom">Select Room</option>
<option title="chatRoom">chat room</option>
</select>
</div>
<div id="form-input">
<form id="name-form" action="/" method="POST">
<input type="text" placeholder="Enter Username">
<input type="submit" name="body" value="Submit Username">
</form>
</div>
<div id="form-input" class="submitDiv">
<form id="chat-form" id="newMessageInput" action="chat" method="POST">
<input type="text" name="body" placeholder="Enter Message">
<input type="submit" value="Submit Message">
</form>
<button id='getAllNow' action='chat' method='GET'>Get All Messages</button>
<!-- <form id="getMessages" action="chat" method="GET"></form> -->
</div>
<div id='chat-log'></div>
<script>
let chatForm = document.getElementById('chat-form')
let chatLog = document.getElementById('chat-log')
let getMessages = document.getElementById('getAllNow')
let submitName = document.getElementById('name-form')
let since
let messages =
chatForm.addEventListener('submit', (event) =>
// prevents the event from performing the default function.
event.preventDefault();
let inputElement = chatForm.querySelector('input[name=body]')
// let inputElement = document.getElementById('newMessageInput')
let message = inputElement.value
// the function below gets all of the parameters from the URL so I can use them later.
let params = new URLSearchParams();
params.append('body', message)
fetch('/chat',
method: 'POST',
body: params,
)
.then((response) => response.json())
.then((messages) =>
chatLog.innerHTML = messages.map(message => message.body).join('<br>')
)
)
getMessages.addEventListener('click', (event) =>
fetch('/chat',
method: 'GET',
)
.then((response) => response.json())
.then((messages) =>
let latestFormatChatMessages = messages.map((message) =>
let newPTag = (`<p class="fancy"> <strong>$message.body</strong></p> <p class="when">$message.when</p> <p class="fancy"><strong>$message.name</strong> </p>`)
return newPTag
)
chatLog.innerHTML = latestFormatChatMessages.join('<br>')
submitName.value
)
)
I am getting name back as undefined. here is the server code.
const http = require('http');
const mime = require('mime-types');
const Assistant = require('./assistant');
const House = require('./lib/house');
const port = process.env.PORT || 5000;
let messages = ;
let house = new House();
http.createServer(handleRequest).listen(port);
console.log("Listening on port " + port);
function handleRequest(request, response)
// function handleRequest(request, response0
// let url = require('url')
// )
// console.log('Parsing the GET')
// let data = JSON.stringify(messages);
// let type = mime.lookup('json');
// assistant.finishResponse(type, data);
This may help: stackoverflow.com/questions/11563638/…
– dgig
18 hours ago
"input by the user" means there is a text field that the user can put their name into and hit "submit". in the html its made from a form. <input type="submit" name="body" value="Submit Username">
– MTL
18 hours ago
This seems like a client side issue. You are not being able to get the text from a text field to a variable. The link shared by @dgig addresses that issue. If you can't understand or if that does not help you, you'll have to share the relevant client side code.
– Jehanzeb.Malik
18 hours ago
i will post the entire index
– MTL
16 hours ago
1 Answer
1
There are a lot of issues with your code. Looking at your code it seems like you do not have clear idea of how server-client architecture works. It seems like you are trying to make a chat application. You need to take care of three things here.
Client: Takes name of chatroom, username and message. Then on press of a button sends the data to server by making a POST request and waits for response.
Server: Receives the data sent by client and saves it in a database. If save is successful, server sends back a success response. This response may also include the saved row in database. If save is unsuccessful, and error message should be returned.
Client: Receives the response. If the response is success, then updates the chat list. If response is an error, communicate the error message to user.
I fixed the client a little bit so that you get the required information and send it to server.
Client
const sendMessage = document.getElementById('send-message');
const username = document.getElementById('username');
const message = document.getElementById('message');
const chatLog = document.getElementById('chat-log');
const getMessages = document.getElementById('get-all-messages');
const messages = ;
sendMessage.addEventListener('click', (e) =>
const d = new Date().toISOString();
alert("Username: " + username.value + 'n' +
"Message: " + message.value + 'n' +
"When: " + d);
// the function below gets all of the parameters from the URL so I can use them later.
fetch('/chat',
method: 'POST',
body:
body: message.value,
name: username.value,
when: d,
,
)
.then((response) => response.json())
.then((messages) =>
chatLog.innerHTML = messages.map(message => message.body).join('<br>')
);
);
getMessages.addEventListener('click', (e) =>
fetch('/chat',
method: 'GET',
)
.then((response) => response.json())
.then((messages) =>
let latestFormatChatMessages = messages.map((message) =>
return `<p class="fancy"><strong>$message.body</strong></p> <p class="when">$new Date(message.when)</p><p class="fancy"><strong>$message.name</strong> </p>`;
)
chatLog.innerHTML = latestFormatChatMessages.join('<br>');
);
);
<!DOCTYPE html>
<html lang- "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Chat</h1>
<div class="pickRoomDiv">
<button id="pickRoom">Enter Room</button>
<select>
<option title="selectRoom">Select Room</option>
<option title="chatRoom">chat room</option>
</select>
</div>
<div id="form-input">
<input id="username" type="text" placeholder="Enter Username">
<input id="message" type="text" placeholder="Enter Message">
<button id="send-message">
SEND
</button>
</div>
<br>
<br>
<button id='get-all-messages'>Get All Messages</button>
<div id='chat-log'></div>
</body>
</html>
I would suggest that you start off by following a tutorial that teaches you key concepts. There is an option to use sockets. Sockets help in real-time messaging.
Following medium tutorial should help you understand the concepts of programming and code formatting.
Chat app tutorial
You're right I don't. But am trying. Thanks for the help and recommendations.
– MTL
4 hours ago
I also want to say that this was all built in a classroom working with partners as a project for servers and clients. I think part of why my code has a lot of issues is because I've thrown my hands up in frustration at it and have just been writing anything and trying it then either not removing all of it properly or commenting it out also not properly. At one point everything worked, but am now trying to add to it. There was a spec.js we were running tests from using jasmine--node. Anyway thanks again
– MTL
4 hours ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
When you say "input by the user", what do you mean? Is the user logged in?
– Fissure King
18 hours ago