根据textarea的值在HTML中创建列表

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元素的数组。

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

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>不能具有子元素。 您最有可能想要将该孩子附加到listContainer 。

循环为每个“客人”在<ul>添加一个<li>元素。 现在，它应该可以很好地解决所有其他缺陷。

对HTML的一些修改：

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

根据textarea的值在HTML中创建列表

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-04-25 23:17:29

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

说明

根据textarea的值在HTML中创建列表

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-25 23:17:29

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

说明

解决方案1
1 已采纳 2015-04-25 23:17:29