How to put each item into p tag + clear innerHTML at end

Question

I can't seem to correctly figure out how to both: add ap tag to each index && clear the element of all text, once it has reached the end of the array. I've tried various methods at this point and seem to only ever get part of my desired outcome right.

Looking to make it as dynamic as possible.

 const myText = ['hi there', 'my friend', 'how are you', 'today', '?'] let i = 0 function createModal(buttonId) { buttonId.addEventListener('click', function() { let textNode = document.createTextNode( myText[i] == undefined? "": myText[i], i++) document.getElementById('append').appendChild(textNode) }) } createModal(test)

 <button id="test" type='button'>(keep clicking)</button> <div id="append"></div>

Answer 1

I do not have a good english but maybe this is what you want

 const myText = ['hi there', 'my friend', 'how are you', 'today', '?']; let i = 0; function createModal(buttonId) { buttonId.addEventListener('click', function(){ let textNode = document.createTextNode(myText[i] == undefined? "": myText[i], i++) if(i>myText.length){document.getElementById('append').innerHTML = "";} let pTagNode = document.createElement("p"); pTagNode.appendChild(textNode); document.getElementById('append').appendChild(pTagNode); }) } createModal(test)

 <button id="test" type='button'>(keep clicking)</button> <div id="append"></div>

if you want it to start over again, you can use this

 const myText = ['hi there', 'my friend', 'how are you', 'today', '?']; let i = 0; function createModal(buttonId) { buttonId.addEventListener('click', function(){ let textNode = document.createTextNode(myText[i] == undefined? "": myText[i], i++) if(i>myText.length){document.getElementById('append').innerHTML = "";i=0;} let pTagNode = document.createElement("p"); pTagNode.appendChild(textNode); document.getElementById('append').appendChild(pTagNode); }) } createModal(test)

 <button id="test" type='button'>(keep clicking)</button> <div id="append"></div>

Answer 2

As far as I understood, you want to remove all the paragraph text if the limit of the array reaches, until then you want to add a paragraph element containing text in div
this is your updated code

    const myText = ['hi there', 'my friend', 'how are you', 'today', '?']
    let i = 0

    function createModal(buttonId) {

        buttonId.addEventListener('click', function () {
            if (i == myText.length) {
                const requiredElement = document.getElementById('append');
                requiredElement.replaceChildren();
                i = 0;
                return;
            }
            let paragraphElement = document.createElement('p');
            paragraphElement.textContent = myText[i];
            document.getElementById('append').appendChild(paragraphElement);
            ++i;
        });
    }

    createModal(test);

    <button id="test" type='button'>(keep clicking)</button>
    <div id="append"></div>

Answer 3

I'm not sure what you mean by "clear innerHTML at end", but to append <p></p> rather than just text, you just need to use document.createElement

 const myText = ['hi there', 'my friend', 'how are you', 'today', '?'] let i = 0 function createModal(buttonId) { buttonId.addEventListener('click', function(){ let textNode = document.createTextNode( myText[i] == undefined? "": myText[i], i++) let pNode = document.createElement("p"); // Create a <p> node pNode.appendChild(textNode); // Put your text node inside the <p> node document.getElementById('append').appendChild(pNode) }) } createModal(test)

 <button id="test" type='button'>(keep clicking)</button> <div id="append"></div>

Answer 4

Is this what you want to do? As long as i is less than 5 which is the length of myText array, it creates the code.

 const myText = ['hi there', 'my friend', 'how are you', 'today', '?'] let i = 0 function createModal(buttonId) { buttonId.addEventListener('click', function () { if (i < myText.length) { let textNode = document.createTextNode( myText[i] == undefined? "": myText[i], i++) const p = document.createElement('p'); p.appendChild(textNode); document.getElementById('append').appendChild(p); } }); } createModal(test)

 <button id="test" type='button'>(keep clicking)</button> <div id="append"></div>