javascript - Making a list in HTML from value of textarea -


i need make list using javascript.

what i’m trying if user clicked submit button elements in textarea making 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 = 0; < numberoflistitems; ++i){         var listitem = document.createelement("li");         listitem.innerhtml = listdata[i];         listelement.appendchild(listitem);     } }

alright, here’s fixed code , below explanations, etc.

full fixed code along 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 1. line defining listdata problematic:

var listdata = [guestname];

listdata array containing textarea element.

the proper way of getting individual names out of textarea split() value of textarea. i’m going assume guest list in textarea separated line breaks write proper code:

var guestname = document.getelementbyid('text');   // assigns element guestname var listdata = guestname.value.split('\n');   // listdata array contains every line in textarea

this makes use of string.prototype.split takes delimiter argument , turns string array based on separators.

this following line re-appends element present in dom… dom… kind of unnecessary:

document.getelementsbytagname('body')[0].appendchild(listcontainer);

this line problematic well:

guestname.appendchild(listelement);

<textarea>s can’t have child elements. wanted append child listcontainer.

the loop adds <li> element <ul> per “guest”. should work fine now other flaws fixed.

a few remakrs html:

  1. <img src=""> should @ least <img src="" alt=""/> — a missing alt attribute invalid
  2. each </br> should <br/>
  3. the </div> <div class="container"> missing

Comments

Post a Comment

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more

Python Tkinter keyboard using bind -

i have problem using bind option can click button in keyboard, , call function once key pressed. tried taking other codes have similar purpose , saw i'm doing pretty same, though still have problem must've missed. thankful if me this. here's code: # -*- coding: utf-8 -*- #imports tkinter import * pil import imagetk, image import time import tkmessagebox #===========================================================================================================================================# #tkinter class class app(frame): def __init__(self, master=none): frame.__init__(self, master) self.pack() #===========================================================================================================================================# #game pieces classes class board: def __init__(self, rows = 7, columns = 6, picture_height = none, picture_width = none): self.rows = rows self.columns = columns self.picture ...
Read more