I created a div-block with the id "screen", an input field for text with the id "message_text", and a CSS template for message design.
Here is the HTML code for the template:
<template class="template_message" id="template_message">
<div class="message">
<p></p>
</div>
</template>
And here is the JavaScript code:
document.addEventListener("DOMContentLoaded", ()=> {
let button = document.getElementById("send_button");
let template = document.getElementById("template_message");
let screen = document.getElementById("screen");
let message_text = document.getElementById("message_text");
button.addEventListener("click", () => {
let template_clone = template.content.cloneNode(true);
template_clone.textContent = message_text.value;
screen.appendChild(template_clone);
})
})
My goal is to display the value of the "message_text" input field, but all I get is plain text without any CSS styling.