Making a list in HTML from value of textarea
Question
I need a help to make a list using JavaScript.
What I'm trying to do is if user clicked submit button elements in textarea making a list in 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);
}
}
1 answers
solution1
1 ACCPTED 2015-04-25 23:17:29
Alright, here's the fixed code and below are all the explanations, etc.
Full fixed code along with some other improvements
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>
Explanations
numberOfListItems = listData.length;
This will always be 1. The line defining listData is problematic:
var listData = [guestName];
listData is now just an array containing only the textarea element .
The proper way of getting the individual names out of the textarea is to split() the value of the textarea. I'm going to assume that the guest list in your textarea is separated by line breaks as I write the proper code:
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
This makes use of String.prototype.split which takes a delimiter as an argument and turns a string into an array based on the separators.
This following line re-appends an element already present in the DOM… to the DOM… which is kind of unnecessary:
document.getElementsByTagName('body')[0].appendChild(listContainer);
This line is problematic as well:
guestName.appendChild(listElement);
<textarea> s can't have child elements. You most likely wanted to append that child to listContainer .
The loop adds an <li> element to the <ul> per “guest”. It should work fine now with all the other flaws fixed.
A few remakrs to your HTML:
-
<img src="">should at least be<img src="" alt=""/>— a missingaltattribute is invalid - Each
</br>should be a<br/> - The
</div>for<div class="container">is missing
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.