нужна помощь в исправлении неупорядоченного списка, который не отображается через Dom

Question

Лог c кажется нормальным, но мой ul не отображает то, о чем я его прошу. Я использовал console.logs, и я точно получаю poem в функции displayPoem(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').