Solution 1 :

Your saved list items aren’t showing up because your submit onclick calls displayPoem which creates list items and then calls clearForm which removes all list items on the page. Try inputLi = document.querySelectorAll('ol > li').

Problem :

The logic seems sound but my ul is not displaying what I am asking it to. I have used console.logs and I am for sure getting poem in the function displayPoem(poem) but it isn’t showing up when I button click. Any help would be greatly appreciated!

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

small html segment

    <div >
       <ul id="savedThoughts">

       </ul>
    </div>

Comments

Comment posted by Andrew Lovato

dude, I cant believe that was the problem. thank you so much. I was losing my mind figuring out what was going on. Perfect solution you gave.

Comment posted by shannon

we’ve all been there 😉

By

Leave a Reply

Your email address will not be published. Required fields are marked *