無法讓JavaScript從表單發布到表格

我們目前的一項任務是要求我們從表格中獲取一些基本資訊，然后將其發布到表格中。我不確定讓 JS 追加表格的地方出錯了。我試圖按照我們書中的內容來獲得我現在所擁有的東西，但是出了點問題。

當點擊提交按鈕時，表單會清除，并且 url 會顯示資料更改，但頁面上的表格中不會添加任何內容。

 <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();
    }

編輯：由于其他人似乎都能很好地運行它，我假設它與樣式表有關。每當我在 Firefox 或 Edge 上進行測驗時，我都沒有填充任何資訊。這是我用作通用模板的樣式表

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;
  
  }

uj5u.com熱心網友回復：

<script src="demographics.js" ></script>現在對 腳本的更改 <script src="demographics.js" async></script> 與決議頁面并行下載。

uj5u.com熱心網友回復：

一切似乎都運行良好，但加載內容的順序導致此問題發生，請<script src="demographics.js"></script>在頁面底部添加您的腳本。

標籤：javascript html

上一篇：如何在React組件中正確設定“key”？

下一篇：條件渲染的問題反應