Создайте элемент списка и раскрасьте его, используя пользовательский ввод (с javascript) - PullRequest
Новая
       8

Создайте элемент списка и раскрасьте его, используя пользовательский ввод (с javascript)

0 голосов
/ 15 апреля 2020

Я пытаюсь создать функцию, которая позволяет пользователям добавлять элемент в список с помощью поля ввода и окрашивать этот элемент списка на основе раскрывающегося списка. Я выяснил, как создать элемент списка из пользовательского ввода, однако я очень застрял в том, как его раскрасить, основываясь на другом вводе пользователя (где они выбирают цвет элементов списка).

Ниже изображение того, как эти входные данные выглядят для пользователя. 1

Ниже приведены javascript и HTML: 

function newElement2() {
      var li = document.createElement("li");
      var inputValue = document.getElementById("myInput2").value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
      if (inputValue === '') {
        alert("You must write something!");
      } else {
        document.getElementById("myUL").appendChild(li);
      }
      document.getElementById("myInput2").value = "";
    
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      li.appendChild(span);

      for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
          var div = this.parentElement;
          div.style.display = "none";
        }
      }
    }
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">]
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <div class="folder-popup">
       <div class="form-popup" id="popupForm2">
        <form class="form-container">
          <h2 class="addfolder">Add A Folder:</h2>
          <label for="foldername">
          <a class="givefoldername">Folder Name:</a>
          </label>
          <div id="myDIV" class="header">
            <input type="text" id="myInput2" class="foldernameinput" placeholder="Folder Name">
            </div>
        <div>
          <label for="colour">
          <a class="colourdrop">Colour:</a>
          </label>
        </div>

       <div class="dropdown">
       <select class="dropdown-content">
       <a>Select A Colour...</a>
       <option>Red</option>
       <option>Orange</option>
       <option>Yellow</option>
       <option>Light Green</option>
       <option>Dark Green</option>
       <option>Mint</option>
       <option>Light Blue</option>
       <option>Dark Blue</option>
       <option>Light Purple</option>
       <option>Dark Purple</option>
       <option>Light Pink</option>
       <option>Pink</option>
       <option>Brown</option>
       <option>White</option>
       <option>Black</option>
       </select>
       </div>
        <div class="addnclose">
          <span onclick="newElement2()" class="addBtn">Add</span>
          <button type="button" class="btn-close2" onclick="closeForm2()">Close</button>
        </div>
        </form>
      </div>
    </div>
    </body>
    </html>

1 Ответ

0 голосов
/ 15 апреля 2020
  1. Вы должны присвоить элементу <select> идентификатор, чтобы вы могли легко ссылаться на него,
  2. Вы можете получить выделенный текст с помощью sel.options[sel.selectedIndex].text, где sel - это поле выбора.
  3. Вы можете установить стиль (т. Е. Цвет или цвет фона) с помощью элемента стиля.

Объединение этих элементов выглядит примерно так:

<select class="dropdown-content" id="sel"> ... 

var sel = document.getElementById('sel');
var color = sel.options[sel.selectedIndex].text;
li.style.color = color;
...