Is there a way to display the contents of an array as an ordered list but inside of a alert box-CodePudding

I am writing a program which asks for input through text boxes and then asks for more items through prompts. I am using the .push method to add the inputs to the empty array I have. At the end of the program it will display the items inside of an alert box but the items need to be in alphabetical order and be displayed as an ordered list. I know this can be done to an array using the .map method but all of the examples I see are displaying this to the page and not inside an alert.

Here is the code I am using.

let list = [];

function groceryList()
{
    text_one = document.getElementById('text1').value;
    text_two = document.getElementById('text2').value;
    text_three = document.getElementById('text3').value;
    list.push(text_one, text_two, text_three);

    add = prompt("Enter another item on your grocery list: (Enter 0 to finish)");

    while (add !== 0) {
        list.push(add);
        add = prompt("Enter another item on your grocery list: (Enter 0 to finish)");

        if (add == 0) {
            break;
        }
    }
    list.sort();
    alert(list);
}

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Grocery List</title>
</head>
<body>
    <script type="text/javascript" src="my_list.js" charset="utf-8"></script>
    <p>Please use the form below to add 3 items to the grocery list.</p>
    <form onsubmit="groceryList()">
        <input type="text" id="text1">
        <input type="text" id="text2">
        <input type="text" id="text3"> <br> <br>
        <input type="submit" value="Add to the grocery list">
    </form>
</body>
</html>

CodePudding user response：

Try this:

...
list.sort();
let orderedList = list.reduce((list,item, index)=>{ return `${list}${index 1}. ${item}\n`},"");
alert(orderedList);
...

CodePudding user response：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Grocery List</title>
</head>
<body>
<script type="text/javascript" charset="utf-8">
  let list = [];
  
  function groceryList()
  {
    text_one = document.getElementById('text1').value;
    text_two = document.getElementById('text2').value;
    text_three = document.getElementById('text3').value;
    list.push(text_one, text_two, text_three);
    
    add = prompt("Enter another item on your grocery list: (Enter 0 to finish)");
    
    while (add !== 0) {
      list.push(add);
      add = prompt("Enter another item on your grocery list: (Enter 0 to finish)");
      
      if (add == 0) {
        break;
      }
    }
    list.sort();
    alert(list.join('\n'));
  }  
</script>
  <p>Please use the form below to add 3 items to the grocery list.</p>
  <form onsubmit="groceryList()">
  <input type="text" id="text1">
  <input type="text" id="text2">
  <input type="text" id="text3"> <br> <br>
  <input type="submit" value="Add to the grocery list">
  </form>
</body>
</html>