时间戳

首页 > 解决方案 > 来自两个 li 元素的逗号分隔列表

javascript - 来自两个 li 元素的逗号分隔列表

问题描述

我需要帮助来推进我的代码。我希望每次用户在两个单词之间写 (,) 时，它们应该分开并在列表中形成两个 li 元素。现在整个代码都可以工作，但我会得到有关如何制作逗号分隔文本的提示。

   var names = [];
  function convert_to_list()
  {

    var theName = document.getElementById("enter").value;
    if (theName == "" || theName.length == 0)
    {
       return false; //stop the function since the value is empty.
    }
    names.push(theName);
    document.getElementById("converted_list").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
  }
    

<form>
    <fieldset>
    
        <textarea id="enter" onkeyup=""></textarea> 
         <input onclick="convert_to_list()"value="Konvertera" type="button"/>
                    
         <div id="converted_list"><ul></ul></div>
                
      </form>
       </fieldset>

标签： javascripthtml

解决方案

使用split()函数使用逗号分隔单词，然后create li element附加到最终的 ul 元素中。

const btnEnter = document.getElementById("btnEnter");
btnEnter.addEventListener("click", convert_to_list);
const ulElements = document.getElementById("converted_list").children[0];

function convert_to_list() {
  const theName = document.getElementById("enter").value;
  if (theName.length <= 0) {
    return false;
  }
  const list = theName.split(",");
  const liElements = [];
  for (const value of list) {
    const li = document.createElement('li');
    li.innerHTML = value.trim();
    ulElements.appendChild(li);
  }
}
<html>
<head></head>
<body>
<form>
    <fieldset>
    
        <textarea id="enter" onkeyup=""></textarea> 
         <input id="btnEnter" value="Konvertera" type="button"/>
                    
         <div id="converted_list"><ul></ul></div>
                
       </fieldset> 
</form>
</body>
</html>

推荐阅读