Currently, I have a series of hardcoded HTML elements in my code snippet.
<!-- Reciever Message-->
<div class="media w-50 ml-auto mb-3">
<div class="media-body">
<div class="bg-primary rounded py-2 px-3 mb-2">
<p class="text-small mb-0 text-white">Test chat</p>
</div>
</div>
</div>
My aim is to dynamically generate these elements when a button is clicked and insert the text entered into the input box into the <p> tag. Here's the code for the button and input box:
<form action="#" class="bg-light">
<div class="input-group">
<input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control rounded-0 border-0 py-4" id="message">
<div class="input-group-append">
<button id="button-addon2" type="submit" class="btn btn-link" onclick="addText()"> <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</form>
Here is the function that should be executed upon clicking the button:
function addText() {
var p = document.createElement("p");
p.className ="text-small mb-0 text-white"
var inputValue = document.getElementById("message").value;
var text = document.createTextNode(inputValue);
p.appendChild(text);
if (inputValue === '') {
alert("You must write something!");
} else {
var div = document.createElement("div");
div.className = "media w-50 ml-auto mb-3";
var div2 = document.createElement("div");
div2.className = "media-body";
var div3 = document.createElement("div");
div3.className = "bg-primary rounded py-2 px-3 mb-2";
div3.id = "receive-text";
div3.appendChild(p);
}
document.getElementById("message").value = "";
}
However, after clicking the button, nothing happens. What am I doing incorrectly?