根据 textarea 的值在 HTML 中制作列表

Question

我需要帮助来使用 JavaScript 制作列表。

我想要做的是，如果用户单击文本区域中的提交按钮元素，则在 HTML 中创建一个列表。

HTML:

<body>
    <div class="container">
        <div id="main">
            <img src="">
        </div>
        </br>
        <div class="box">
            <h3>Guest List:</h3>
            <textarea id="text"></textarea>
            </br>
            <button id="submit" onclick="submit()">Submit</button>
        </div>
        <div class = "guestList">
            <div id="list"></div>
        </div>

    <script src="main.js"></script>
</body>

JavaScript:

function submit(){
    var guestName = document.getElementById('text');
    var listData = [guestName];
    var listContainer = document.getElementById('list');
    document.getElementsByTagName('body')[0].appendChild(listContainer);
    var listElement = document.createElement("ul");
    guestName.appendChild(listElement);
    var numberOfListItems = listData.length;
    for(var i = 0; i < numberOfListItems; ++i){
        var listItem = document.createElement("li");
        listItem.innerHTML = listData[i];
        listElement.appendChild(listItem);
    }
}

Answer 1

好的，这里是固定代码，下面是所有的解释等等

完整的固定代码以及一些其他改进

function submit(){
    var guestName=document.getElementById('text');
    var listData=guestName.value.split('\n');

    var listContainer=document.getElementById('list'),
        listElement=document.createElement("ul");
    listContainer.appendChild(listElement);

    var numberOfListItems=listData.length;
    var listItem;
    for(var i=0; i<numberOfListItems; ++i){
        listItem=document.createElement("li");
        listItem.innerHTML=listData[i];
        listElement.appendChild(listItem);
    }
}

<body>
    <div class="container">
        <div id="main">
            <img src="" alt=""/>
        </div>
        <br/>
        <div class="box">
            <h3>Guest List:</h3>
            <textarea id="text"></textarea>
            <br/>
            <button id="submit" onclick="submit();">Submit</button>
        </div>
        <div class="guestList">
            <div id="list"></div>
        </div>
    </div>

    <script src="main.js"></script>
</body>

解释

numberOfListItems = listData.length;

这将始终为 1。定义 listData 的行有问题：

var listData = [guestName];

listData 现在只是一个仅包含 textarea 元素的数组.

从文本区域中获取个人名称的正确方法是 split() 文本区域的值。当我编写正确的代码时，我将假设您的文本区域中的来宾列表由换行符分隔：

var guestName = document.getElementById('text');
  // assigns the element to guestName
var listData = guestName.value.split('\n');
  // listData is now an Array that contains every line in the textarea

这利用了 String.prototype.split，它将定界符作为参数，并根据分隔符将字符串转换为数组。

下一行 re-appends 一个元素已经存在于 DOM… 到 DOM… 这是不必要的：

document.getElementsByTagName('body')[0].appendChild(listContainer);

这一行也有问题：

guestName.appendChild(listElement);

<textarea>s 不能有 child 个元素。您很可能想将 child 附加到 listContainer.

该循环向每个“客人”的 <ul> 添加了一个 <li> 元素。它应该可以正常工作现在，所有其他缺陷都已修复。

对您的 HTML 进行一些修改：

<img src="">至少应该是<img src="" alt=""/> —— 缺少alt属性无效
每个</br>应该是一个<br/>
缺少 <div class="container"> 的 </div>

根据 textarea 的值在 HTML 中制作列表

Making a list in HTML from value of textarea

html

javascript

textarea

完整的固定代码以及一些其他改进

解释