string to array, array to <ul> using javascript

Question

I would like to take a user entered string. Create an array from said string. Then take that array and display it as a 'ul'. The user entered string will be flower names separated by "&". I would also like to see if I could use an alert to notify the user that they basically did not type in a correctly formatted string.

here is what I have so far but Im confused at how to continue as well as how to implement an "alert".

html:

    <form>
        Enter flowers here: <input type="text" id="flower_string"><br>
        <input type="button" value="Just Do It" onclick="FlowerArray()"><br>
    </form>
    <ul id="flower_results"></ul>

javascript:

//funtion will take user flower names seperated by "&" to create an array and display
function FlowerArray(){
    var flower_string = document.getElementById("flower_string").value;
    var flower_array = flower_string.split("&");
    var i;
    //for loop to display results to user
    for(i = 0; i < flower_array.length; i++){

    }
}

my for loop is not complete because im unsure how i can do this.

Amit · Accepted Answer · 2015-09-06 21:17:18Z

2

You need to create <li> elements and append them to the <ul>. See this snippet with comments:

//funtion will take user flower names seperated by "&" to create an array and display
function FlowerArray(){
  var flower_string = document.getElementById("flower_string").value;
  var flower_array = flower_string.split("&");
  var i;
  var results = document.getElementById('flower_results'); // <- get the UL element
  //for loop to display results to user
  for(i = 0; i < flower_array.length; i++){
    var li = document.createElement('li'); // <- create a LI element
    li.innerHTML = flower_array[i]; // <- set it's content
    results.appendChild(li); // append it to the UL
  }
}

<form>
Enter flowers here: <input type="text" id="flower_string"><br>
<input type="button" value="Just Do It" onclick="FlowerArray()"><br>
</form>
<ul id="flower_results"></ul>

answered Sep 6, 2015 at 21:17

Amit

46.5k9 gold badges84 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oriol Over a year ago

I would use textContent instead of innerHTML to avoid parsing the string as HTML.

Amit Over a year ago

@Oriol that's only true if the content really is just text. I'm not assuming anything about what styling / HTML OP really wants to put inside the <li>'s.

dfsq · Accepted Answer · 2015-09-06 21:20:49Z

2

You can compose a string and the append it as innerHTML:

function FlowerArray() {
  var flower_string = document.getElementById("flower_string").value;
  var flower_array = flower_string.split("&");
  var i, html = '';
  
  //for loop to display results to user
  html = flower_array.map(function(el) {
    return '<li>' + el + '</li>';
  }).join('');
  
  document.getElementById('flower_results').innerHTML = html;
}

<form>
  Enter flowers here:
  <input type="text" id="flower_string">
  <br>
  <input type="button" value="Just Do It" onclick="FlowerArray()">
  <br>
</form>
<ul id="flower_results"></ul>

answered Sep 6, 2015 at 21:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

string to array, array to <ul> using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related