CODEWITHSUNDEEP
javascripthtmlcsspopup
Jasper Howard
Jasper Howard

Reputation: 167

How to make dynamic html Pop-UP using Javascript?

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

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:

enter image description here

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!

Upvotes: 0

Views: 434

Answers (1)

bron
bron

Reputation: 1548

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>

Upvotes: 1

Related Questions