Here is an approach for you to consider:
- Get the value of text typed in by the user from the
MessageBox input.
- Create a new
input tag, make it readonly and assign the value of new input the value from the MessageBox input
- Append the input to
Results
$("#SendMessage").click(function () {
// 1
const msgBoxIn = document.getElementById('MessageBox');
// 2
const text = msgBoxIn.value;
const newMsgIn = document.createElement('input');
newMsgIn.setAttribute('readonly', true);
// 3
newMsgIn.value = text;
const resultsDiv = documet.getElementById('Results');
const br = document.createElement('br');
resultsDiv.appendChild(br);
resultsDiv.appendChild(newMsgIn);
});
The resulting HTML will be like this:
<div class="Results" id="Results">
<center>
<div class="MessageUnit">
<input class="MessageBox" placeholder="Type Your Message Here!" id="MessageBox">
<img src="https://th.bing.com/th?q=Send+Arrow+Icon&w=120&h=120&c=1&rs=1&qlt=90&cb=1&pid=InlineBlock&mkt=en-WW&adlt=moderate&t=1&mw=247"
style="border-radius: 50%; width: 60px; height: 60px; border-color:#ffffff; margin-top: 0.5%; cursor: pointer;"
border="4px" id="SendMessage">
</div>
</center>
<br>
<input readonly value='Value you added'>
</div>
Also notice you used the same name for both id and class here: <div class="Results" id="Results">. Only the CSS declared using id will be applied based on CSS selector specificity rules. Consider different names.
Note: the snippet is in plain JS. Consider how you can use jquery for it.
What I wanted to achieve is basically adding a text from an input onto something that has just recently been appended. Is it possible? It’s basically like a chatting website. The text the user has written is supposed to be kept in the appended object, but I can’t achieve it.
Details:- An input where the user types the message.
A button which appends a read-only input.
The read-only input should have the message the user typed in the original input.
Here’s my script!
<html>
<head>
<title>Friend's Circle</title>
<style>
.Hammer-Div {
background-color: #3a3939;
color: white;
height: 100%;
width: 80px;
border-radius: 10px 10px 10px 10px;
transition: 0.4s;
position: fixed;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: rgb(105, 105, 105);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.Items {
cursor: pointer;
}
p {
font-size: 30px;
display: none;
}
.Results {
height: 100%;
width: 92.5%;
background-color: #585858;
border-radius: 10px 10px 10px 10px;
float: right;
}
.MessageBox {
width: 90%;
height: 80%;
border-radius: 10px 10px 10px 10px;
background-color: hsl(0, 1%, 27%);
border: none;
float: left;
margin-left: 1%;
margin-top: 0.5%;
color: white;
font-size: 30px;
padding-left: 20px;
}
.MessageUnit {
height: 10%;
width: 100%;
background-color: #383838;
border-radius: 10px 10px 10px 10px;
}
.Message{
height: 65px;
width: 40%;
background-color: #383838;
border-radius: 10px 10px 10px 10px;
border: none;
margin-left: 1%;
color: white;
font-size: 30px;
padding-left: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#Menu").click(function () {
var a = $("#HammerDiv");
a.css('width', '200px');
$("p").toggle();
setTimeout(function () { a.css('width', '80px'); }, 2500);
setTimeout(function () { $("p").toggle(); }, 2500);
});
});
$(document).ready(function () {
$("#SendMessage").click(function () {
$("#Results").append("<br><input readonly class='Message'><br>");
});
});
</script> </head>
<body bgcolor="#1a1a1a">
<div class="Hammer-Div" id="HammerDiv">
<center>
<div class="container" id="Menu"><br>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div><br><br>
<img src="https://th.bing.com/th/id/OIP.PTArRyNau0VomdH647ex3gHaHa?w=183&h=183&c=7&o=5&pid=1.7"
style="opacity: 0.5; border-radius: 50%; height: 70px; width: 70px;">
<p>Chat</p>
</center>
</div>
<div class="Results" id="Results">
<center>
<div class="MessageUnit">
<input class="MessageBox" placeholder="Type Your Message Here!" id="MessageBox">
<img src="https://th.bing.com/th?q=Send+Arrow+Icon&w=120&h=120&c=1&rs=1&qlt=90&cb=1&pid=InlineBlock&mkt=en-WW&adlt=moderate&t=1&mw=247"
style="border-radius: 50%; width: 60px; height: 60px; border-color:#ffffff; margin-top: 0.5%; cursor: pointer;"
border="4px" id="SendMessage">
</div>
</center>
</div> </body>
</html>
Thank you for your answer. I tried using it, and it didn’t work, but at least I got the reference. Thank you once again!
Not an error exactly, just the value wasn’t getting displayed. But I managed to use jquery for it. Anyways thank you for you effort.
