需要幫助修復未通過 Dom 顯示的無序列表

Question

邏輯似乎合理，但我的 ul 沒有顯示我要求的內容。 我已經使用了console.logs並且我肯定會在 function displayPoem(poem)中得到poem ，但是當我單擊按鈕時它沒有出現。 任何幫助將不勝感激！

const inputsList = document.querySelector('ol');
const poemsList = document.getElementById('savedThoughts');
const form = document.getElementById('')
const submitButton = document.getElementById('submitThoughts');
const startButton = document.querySelector('#startButton')


startButton.onclick = () => {
    const ranNum = generateRanNum();
    generateInputs(ranNum)
    changeToRestartText()
}

submitButton.onclick = () => {
    const poem = savePoem();
    console.log(poem)
    displayPoem(poem);
    clearForm()
}

const generateRanNum = () => {
    let randomNumber = Math.floor(Math.random() * 20);
    return randomNumber
}

const changeToRestartText = () => {
    startButton.textContent = 'Restart Game'
}


const generateInputs = (ranNum) => {
    const listItem = document.createElement('li');
    for(let i = 1; i <= ranNum; i++){
        const input = document.createElement('input');
        listItem.appendChild(input).setAttribute('type', 'text');
        console.log(ranNum)
    }
    inputsList.appendChild(listItem);
}

const savePoem = () => {
        let poemArr = [];
        const input = document.querySelectorAll('input');
        input.forEach(element => {
            poemArr.push(element.value);
        })
        // console.log(poemArr)
        return poemArr; 
}

const displayPoem = (poem) => {                    
    const savedPoem = document.createElement('li')
    const savedText = document.createElement('span')
    const deletePoem = document.createElement('button')

    console.log(poem)
    savedPoem.appendChild(savedText);
    savedText.textContent = poem.toString();
    savedPoem.appendChild(deletePoem);
    deletePoem.textContent = 'Delete';
    poemsList.appendChild(savedPoem)

    deletePoem.onclick = e => {
        poemsList.removeChild(savedPoem);
    }
}

const clearForm = () => {
    const inputLi = document.querySelectorAll('li');
    inputLi.forEach(element => {
        element.remove()
    })
}

小html段

    <div >
       <ul id="savedThoughts">

       </ul>
    </div>

Answer 1

您保存的列表項未顯示，因為您提交的 onclick 調用 displayPoem 創建列表項，然后調用 clearForm 刪除頁面上的所有列表項。 試試inputLi = document.querySelectorAll('ol > li') 。