Форум

Jellockz · #1 (**permalink**) 08.11.2022, 15:48

[IMG]https://ibb.co/ggCWQdr[/IMG
Здравствуйте,помогите пожалуйста.Хочу добавить на сайт новую информацию которая срабатывает при клике по кнопке добавить ]добавлялась характеристика, в уже имеещийся список характеристик список, которую я ввожу в инпут.

<div class="wrapper">
                    <p class="wrapper_text">1. Двойной обод</p>
                    <p class="wrapper_text">3. Колеса диаметром 26 дюймов</p>
                    <p class="wrapper_text">2. Алюминиевый сплав</p>
                    <p class="wrapper_text">4. Покрышки 26х1,95"</p>
                </div>
                <div class="add_1">
                    <h1 class="add_1-title">Добавить характеристику</h1>
                    <input type="text" class="add_1-input">
                    <button class="add_1-button">Добавить</button>
                </div>

рони · #2 (**permalink**) 08.11.2022, 16:14

Jellockz,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .wrapper {
            counter-reset: num 0;
        }
        .wrapper .wrapper_text:before {
            counter-increment: num;
            content: counter(num)'. ';
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let button = document.querySelector(".add_1-button"),
                div = document.querySelector(".wrapper"),
                input = document.querySelector(".add_1-input");
            button.addEventListener("click", function() {
                let txt = input.value.trim();
                if (txt) {
                    let [a, ...b] = txt;
                    txt = a.toUpperCase() + b.join("").toLowerCase();
                    div.insertAdjacentHTML("beforeend", `<p class="wrapper_text">${txt}</p>`);
                };
                input.value = "";
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <p class="wrapper_text">Двойной обод</p>
        <p class="wrapper_text">Колеса диаметром 26 дюймов</p>
        <p class="wrapper_text">Алюминиевый сплав</p>
        <p class="wrapper_text">Покрышки 26х1,95"</p>
    </div>
    <div class="add_1">
        <h1 class="add_1-title">Добавить характеристику</h1>
        <input type="text" class="add_1-input">
        <button class="add_1-button">Добавить</button>
    </div>
</body>
</html>

Jellockz · #3 (**permalink**) 08.11.2022, 16:26

Спасибо большое.

Форум

Справочник

Discord чат

Курсы javascript