Javascript-форум - Радиокнопки меняющие стиль текста в сообщении

Доброго времени суток уважаемые форумчане. Задача над которой работаю: «Создать html-страницу с формой для ввода стилизованного текста. После заполнения формы, вывести текст на экран в соответствии с указанными стилями.» (Стили шрифтов: Bold, Underline, italics, Left, Right, Justify или по своему усмотрению. Пользоваться html, css, javascript). Помогите пожалуйста разобраться с JS, не могу заставить радиокнопки менять стили шрифтов для набранного (нового) сообщения.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="messages-container">
    </div>
    <div class="footer">
        <h2>Add new message</h2>
        <form action="">
            <div>
                <label for="userText">Your message:</label>
                <textarea name="userText" id="userText" cols="30" rows="10"></textarea>
            </div>  
            <input type="submit" value="send" id="button">
            <div class="radio">
                <p><input type="radio" value="bold" name="fontStyle" checked>bold</p>
                <p><input type="radio" value="underline" name="fontStyle">underline</p>
                <p><input type="radio" value="italics" name="fontStyle">italics</p>
                <p><input type="radio" value="left" name="fontStyle">left</p>
                <p><input type="radio" value="right" name="fontStyle">right</p>
                <p><input type="radio" value="justify" name="fontStyle">justify</p>
            </div>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

.message {
    margin: 20px;
    padding: 10px;
    border: 1px solid black;
}

.message-header {
    display: flex;
    justify-content: space-between;
}

.footer {
    position: fixed;
    bottom: 0;
}

.radio {
    display: flex;
}

let messages = document.querySelector(".messages-container");
let userText = document.querySelector("#userText");
let button = document.querySelector("#button");

button.addEventListener('click', function(event) {
    event.preventDefault();
    let message = document.createElement('div');
    message.classList.add('message');
    let messageContainer = document.createElement('p');
    messageContainer.classList.add('text');
    messageContainer.innerText = userText.value;
    message.appendChild(messageContainer);
    messages.appendChild(message);
})

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .message { margin: 20px; padding: 10px; border: 1px solid black; } .message-header { display: flex; justify-content: space-between; } .footer { position: fixed; bottom: 0; } .radio { display: flex; } .text.bold { font-weight: bold; } .text.italics { font-style: italic; } .text.left { text-align: left; } .text.right { text-align: right; } .text.justify { text-align: justify; } .text.underline { text-decoration: underline; } </style> </head> <body> <div class="messages-container"> </div> <div class="footer"> <h2>Add new message</h2> <form action=""> <div> <label for="userText">Your message:</label> <textarea name="userText" id="userText" cols="30" rows="10"></textarea> </div> <input type="submit" value="send" id="button"> <div class="radio"> <p><input type="radio" value="bold" name="fontStyle" checked>bold</p> <p><input type="radio" value="underline" name="fontStyle">underline</p> <p><input type="radio" value="italics" name="fontStyle">italics</p> <p><input type="radio" value="left" name="fontStyle">left</p> <p><input type="radio" value="right" name="fontStyle">right</p> <p><input type="radio" value="justify" name="fontStyle">justify</p> </div> </form> </div> <script> let messages = document.querySelector(".messages-container"); let form = document.querySelector(".footer form"); form.addEventListener('submit', function(event) { event.preventDefault(); let txt = this.userText.value; this.userText.value = ""; if (!txt.trim()) return; let message = document.createElement('div'); message.classList.add('message'); let messageContainer = document.createElement('p'); messageContainer.classList.add('text'); messageContainer.textContent = txt; message.appendChild(messageContainer); messages.appendChild(message); messageContainer.classList.add(this.fontStyle.value); }) </script> </body> </html>