Can't get JavaScript to post to table from form-CodePudding

One of our current assignments is asking us to grab some basic information from a form and then have it post to a table. I'm not sure where I went wrong getting the JS to append the table. I tried to follow what was in our book to get what I have now but something went wrong.

When the submit button is hit, the form clears and the url shows the data change but nothing is added to the table on the page.

 <script src="demographics.js"></script>
        <form action="#" id="demographics" method="get">
            <span>Name</span>
                <input type="text" id="name" name="name">
            <span>Address</span>
                <input type="text" id="address" name="address">
            <span>City</span>
                <input type="text" id="city" name="city">
            <span>State</span>
             <input type="text" id="state" name="state">
            <span>Zip Code</span>
                <input type="number" id="zip_code" name="zip_code">
            <span>Phone Number</span>
                <input type="number" id="phone_num" name="phone_num">
            <span>Snapchat</span>
                <input type="text" id="snapchat" name="snapchat">
            <span>Twitter Usernme</span>
                <input type="text" id="twitter" name="twitter">
            <span>Instagram</span>
                <input type="text" id="instagram" name="instagram">
            <span>Favorite Video Game</span>
                <input type="text" id="favorite_game" name="favorite_game">
            <button type="submit">Submit</button>
        </form>
        <ul id="data">
            <li>Name</li>
            <li>Address</li>
            <li>City</li>
            <li>State</li>
            <li>Zip Code</li>
            <li>Phone #</li>
            <li>Snapchat</li>
            <li>Twitter</li>
            <li>Instagram</li>
            <li>Favorite Video Game</li>
        </ul>

    let form = document.getElementById("demographics");
    let table = document.getElementById('data');
    
    form.addEventListener("submit", (e)=>{
        e.preventDefault();
        submit();
    })
    
    const submit =()=>{
        let name = document.getElementById("name").value;
        let address = document.getElementById("address").value;
        let city = document.getElementById("city").value;
        let state = document.getElementById("state").value;
        let zip_code = document.getElementById("zip_code").value;
        let phone = document.getElementById("phone_num").value;
        let snapchat = document.getElementById("snapchat").value;
        let twitter = document.getElementById("twitter").value;
        let instagram = document.getElementById("instagram").value;
        let game = document.getElementById("favorite_game").value;
    
        let array = [name, address, city, state, zip_code, phone, snapchat, twitter, instagram, game];
        array.forEach((item)=>{
            var li = document.createElement("li");
            var text = document.createTextNode(item);
            li.appendChild(text);
            table.appendChild(li);
        })
        form.reset();
    }

Edit: Since everyone else seems to be able to run it just fine, I'm assuming it has to do with the stylesheet then. Whenever I test, on either Firefox or Edge, I have no information populate. Here's the stylesheet I was using as a general template

form{
    display:flex;
    flex-direction:column;
    width:35vw;
  }
  form input{
    padding:0.7em 1em;
  }
  form span{
    padding:0.6em 1em;
  }
  form > button{
    padding:1.1em;
    margin:1em 1em;
    cursor:pointer;
  }
  ul{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    justify-content:center;
    width:25vw;
  
  }
  ul li{
    padding:1em 2em .8em 2em;
    border:1px solid black;
  
  }

CodePudding user response：

change <script src="demographics.js" ></script> to <script src="demographics.js" async></script> the script now is downloaded in parallel to parsing the page.

CodePudding user response：

Everything seems to be working fine but the order where the content is loaded is making this issue happen, please add your script <script src="demographics.js"></script> at the bottom of the page.