How to make dynamic html Pop-UP using Javascript?

Question

I'm working on a school project for a digital menu for a restaurant. What I've done so far is this Pop-UP:

It shows up when a button is pressed and I also added an 'X' icon to close it. The problem is that it's static and this is how I store it inside the index.html file:

<div class="menu">
<h2>Our Menu</h2>
<ul>
     <li>
         <label>
             <input type="checkbox" name="">
             <span class="icon"></span>
             <span class="list">Fried Fish With Souce</span>
         </label>
     </li>
</ul>
</div>

As you can see, the data is stored in a static way and the problem is that I must have Pop-UPS for a lot of other categories. A solution would be to use Javascript to create the Pop-UP:

function showMenu()
{
    const storedMenu = [{name: "Fried Fish With Souce", checked: false}, {name:"anotherName", checked: false}];
        var content=`<div class="menu"><h2>Our Menu</h2><a href="javascript:closeMenu()" class="close-icon"></a>`;
 
        storedMenu.reduce((accumulator, currentItem) => {
        accumulator += `<ul><li><label> 
        <input type="checkbox" name="">
        <span class="icon"></span>
        <span class="list">${currentItem.name}</span>
        </label><li><ul>`;content+=accumulator;
        }, '' );
            content+="</div>";
            document.write(content);
}

This is the OUTPUT from the source code above:

The problem is that document.write seems to create a whole new page and thus, the CSS doesn't get applied, it OVERWRITES the index.html! My question is, how can I create the Dynamic Pop-UP using Javascript in this case but retaining the CSS, also the Pop-UP should simply appear on top of the index.html, but it should still be visible.Thanks in advance!

bron · Accepted Answer · 2020-10-22 21:09:49Z

1

document.write only works during rendering of the page. If you want dynamic lists, then use (example)

<div id="docwrite"></div>

<script>
var str = "<ul><li>abc</li><li>klm</li><li>xyz</li></ul>";
document.querySelector("#docwrite").innerHTML = str;
</script>

answered Oct 22, 2020 at 21:09

bron

1,5681 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bron Over a year ago

Success with your project.

Collectives™ on Stack Overflow

How to make dynamic html Pop-UP using Javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related