Question

我需要帮助才能使用JavaScript创建列表。

我想要做的是，如果用户点击了textarea中的提交按钮元素，那就是用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元素的数组。

将单个名称从textarea中取出的正确方法是split() textarea的值。我将假设在编写正确的代码时，textarea中的guest列表由换行符分隔：

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，它以分隔符作为参数，并根据分隔符将字符串转换为数组。

以下这一行将DOM中已经存在的元素重新附加到DOM中......这是不必要的：

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

这一行也存在问题：

guestName.appendChild(listElement);

<textarea> s不能包含子元素。您很可能想将该孩子附加到listContainer。

循环向每个“guest”的<li>添加<ul>元素。它应该可以正常运行现在并修复所有其他缺陷。

为HTML重新制作了一些内容：

<img src="">至少应为<img src="" alt=""/> - 缺少alt属性无效
每个</br>应为<br/>
</div> <div class="container">缺少

根据textarea的值制作HTML列表

1 个答案:

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

说明