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> 

var name=[]；
函数convert_to_list（）
{
var theName=document.getElementById（“输入”）.value；
如果（theName==“”| | theName.length==0）
{
return false；//由于值为空，请停止函数。
}
name.push（名称）；
document.getElementById（“转换的_列表”）.children[0]。innerHTML+=“
”+名称[names.length-1]+”
”；
}

你可以像我在这里做的那样做

使用

split

函数在字符串遇到指定字符（在您的示例中为逗号）时拆分字符串

HTML（pug）将如下所示：

form
  label 
    span seperated list
    input#js-seperatedList(type="text")
    
ul.results

这将是您的JavaScript代码：

const inputValue = document.querySelector('#js-seperatedList')
const results = document.querySelector('.results');

inputValue.addEventListener('keyup', (e) => {
  results.innerHTML = ''
  const res = e.target.value.split(",")
  
  for (let i = 0; i < res.length; i += 1) {
    const e = document.createElement('li');
    e.innerHTML = res[i]
    results.appendChild(e)
  }
})

const inputValue=document.querySelector（“#js separatedlist”）
const results=document.querySelector（'.results'）；
inputValue.addEventListener（'keyup'，（e）=>{
results.innerHTML=“”
常量res=e.target.value.split（“，”）
对于（设i=0；i

使用

split（）

函数使用逗号分隔单词，然后

创建li元素

并附加到最终ul元素中

constbtenter=document.getElementById（“btenter”）；
btenter.addEventListener（“单击”，将_转换为_列表）；
constUleElements=document.getElementById（“转换列表”）.children[0]；
函数convert_to_list（）{
const theName=document.getElementById（“输入”）.value；
如果（theName.length，我建议使用addEventListener，它比在html元素中调用函数简单得多，并且为了完成您要求的任务，split（）方法可以对任何字符串执行此操作，如果您不理解此代码，我很乐意为您提供帮助

document.querySelector('.btnclick').addEventListener('click', function () {
  const theName = document.getElementById('enter').value;

      if (theName.includes(',')) {
        theName.split(',').map(function (e) {
          if (e !== '')
            return document
              .querySelector('#converted_list')
              .insertAdjacentHTML('afterbegin', `<li>${e}</li>`);
        });
      } else if (theName !== '' || theName.length !== 0) {
        document
          .querySelector('#converted_list')
          .insertAdjacentHTML('afterbegin', `<li>${theName}</li>`);
      }
    });
  <form>
    <fieldset>

      <textarea id="enter" onkeyup=""></textarea>
      <input  class="btnclick" value="Konvertera" type="button" />

      <div id="converted_list">
        <ul></ul>
      </div>

  </form>

document.querySelector（'.btnclick'）.addEventListener（'click'，函数（）{
const theName=document.getElementById（'enter'）。值；
if（名称包括（'，'））{
name.split（'，'）.map（函数（e）{
如果（e！=''）
返回文件
.querySelector（“#转换的_列表”）
.insertAdjacentHTML（'afterbegin'，`li>${e}`）；
});
}else if（theName！=''| | theName.length！==0）{
文件
.querySelector（“#转换的_列表”）
.insertAdjacentHTML（'afterbegin'，`li>${theName}`）；
}
});


document.querySelector（“表单”）.onclick=（ev，v）=>{
if（ev.target.tagName==“按钮”）{
ev.preventDefault（）；
v=ev.target.previousElementSibling.value.trim（）；
ev.target.nextElementSibling.innerHTML=（v>“”？“
”+v.replaceAll（“，”，“
”）+“
”：”）；
}
}

康维特拉

将上述评论发布