Форум

underground · #1 (**permalink**) 22.08.2022, 12:11

Доброго времени суток уважаемые форумчане. Задача над которой работаю: «Создать 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);
})

рони · #2 (**permalink**) 22.08.2022, 12:52

underground,

<!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>

underground · #3 (**permalink**) 22.08.2022, 14:54

Большое спасибо!

Aetae · #4 (**permalink**) 22.08.2022, 16:23

underground, используй label вместо p, а то неудобно нажимать.)

Форум

Справочник

Discord чат

Курсы javascript