I need to create multiple instances of my CSS class in js

Question

I have a base class called toast in CSS that includes all of my basic styling, with a javascript function that is passed a type of toast to create based on user input in order to give feedback. This function edits my toast class and adds in some icons and text as shown below:

#toast {
        visibility: hidden;
        width: 200px;
        min-height: 40px;
        max-height: 100px;
        border-radius: 5px;
        //and a whole bunch more styling
        }

And then my js:

function showToast(type) {
    var label = null;
    var iconElement = null;
    var i = document.getElementById("toast")

    switch (type) {
        case 'success':
            i.style.border = 'solid 1px #007700';
            label = "SUCCESS";
            iconElement = "icons/success.png";
            break;
           //and then a bunch more cases for my other types
    }

    document.getElementById("title").innerHTML = label;
    document.getElementById("icon").src = iconElement;
    i.style.visibility = 'visible';
}

Currently every time I call my function to create a new toast it replaces the old one, however I would like to update them so they can stack and be able to output multiple pieces of feedback at once. How do I create multiple instances of my CSS class so that they are not overwritten every time I call my constructor?

Answer 1

You are probably giving every single element the ID, toast. Therefore, when you run this line (which is missing a semicolon (;)):

var i = document.getElementById("toast")

You're just getting the first element with the toast ID over and over again and replace it.

What you might want to do is assign a class to your toast element.

It might look something like this:

<div id="genericToast1" class="toast"></div>
<div id="successToast1" class="toast success"></div>
<div id="burntToast1" class="toast burnt"></div>

Then in your CSS, you can just use class selectors to modify them like this:

.toast 
{
    visibility: hidden;
    width: 200px;
    min-height: 40px;
    max-height: 100px;
    border-radius: 5px;
    //and a whole bunch more styling
}

.toast.success
{
//More styling for this kind of toast...
}

.toast.burnt
{
//More styling...
}

No JS needed!