Показать сообщение отдельно
  #2 (permalink)  
Старый 19.10.2020, 23:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Joselin,

<!DOCTYPE html>
<html lang="rus">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" class="form-control" id="NameField" placeholder="Значение для вставки">
    <input type="text" class="form-control" id="NameField1" placeholder="Значение для вставки">
    <select id="choose">
    <option value="10">10</option>
    <option value="20">30</option>
    <option value="30">60</option>
    </select>
    <input type="button" id="choo" class="button-onclick" onclick="insertAfterBegin(this)" value="Красный">
    <input type="button" id="choo1" class="button-onclick" onclick="insertAfterBegin(this)" value="Синий">
    <input type="button" id="choo2" class="button-onclick" onclick="insertAfterBegin(this)" value="Зеленый">
    <button onclick="insertAfterBegin()">Вставить</button>
    <!-- добавляем атрибут событий onclick -->
    <div style="border:1px solid orange">
    </div>
    <script>
        const div = document.querySelector("div"),
            inp = document.getElementById("NameField"),
            inp1 = document.getElementById("NameField1"),
            cho = document.getElementById("choose"),
            choo = document.getElementById('choo'),
            ch = document.getElementById("choo1"),
            c = document.getElementById("choo2");
        function insertAfterBegin(el) {
            if (inp.value) div.insertAdjacentText("afterbegin", inp.value);
            inp.value = "";
            let color = "";
            if (el == choo) color = "#FF0000";
            if (el == ch) color = "#0000FF";
            if (el == c) color = "#008000";
            if (color) div.style.color = color;
        }
        cho.onchange = function() {
            div.style.fontSize = this.value + "px";
        }
    </script>
</body>
</html>
Ответить с цитированием