创建一个列表元素，并使用用户输入的内容（使用javascript）为它上色

Posted 2023-01-20

我正在尝试创建一个函数，该函数允许用户使用输入字段将项目添加到列表，并根据下拉框为该列表项目上色。我已经找到了如何根据用户输入创建列表项的方法，但是，我非常坚持如何根据用户的其他输入为其着色（他们选择列表项的颜色）。

下面是这些输入对用户的外观的图像。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";
    
  


HTML:

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

答案

1. 您应该给<select>元素一个ID，以便您可以轻松地引用它，
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;