Форум

Joselin · #1 (**permalink**) 19.10.2020, 22:44

Есть два input, есть раскрывающийся список для выбора размера и три кнопки, с помощью, которых можно задать цвет текста, который будет отображен в div при нажатии на кнопку "Вставить". Не получается сделать так так, чтобы текст отображался в div с заданными характеристиками, помогите пожалуйста

<!DOCTYPE html>
<html lang="rus">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="D:\лаба 4\new 1.css">
    <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()" value="Красный">
<input type="button" id="choo1" class="button-onclick" onclick = "insertAfterBegin()" value="Синий" >
<input type="button" id="choo2" class="button-onclick" onclick = "insertAfterBegin()" value="Зеленый" >
		 
<button onclick = "insertAfterBegin()">Вставить</button> <!-- добавляем атрибут событий onclick -->



                
                
             

   

			
<div  style = "border:1px solid orange">
    <p> </p>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="D:\лаба 4\new 2.js"></script>
</body>
</html>

const div = document.querySelector("div"), // выбираем первый элемент <ul> в документе
      inp = document.getElementById("NameField"); // выбираем первый элемент <input> в документе
      inp1 = document.getElementById("NameField1");


      cho = document.getElementById("choose");
	  
	  choo = document.getElementById('choo'); 
      ch = document.getElementById("choo1"); 
      c = document.getElementById("choo2"); 

function insertAfterBegin() {
    div.insertAdjacentText("afterbegin", inp.value); // текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом
    inp.value = ""; // устанавливаем значение элементу <input>
	div.insertAdjacentText("afterbegin", inp1.value); // текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом
    inp1.value = ""; // устанавливаем значение элементу <input>
	 }
 
cho.onchange = function () {
    
    div.style.fontSize = this.value +"px";
	div.style.fontSize = this.value +"px";
}

рони · #2 (**permalink**) 19.10.2020, 23:24

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>

Joselin · #3 (**permalink**) 19.10.2020, 23:32

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

Форум

Справочник

Discord чат

Курсы javascript