I must generate numerous copies of my CSS class using JavaScript

Question

I must generate numerous copies of my CSS class using JavaScript

My CSS includes a base class named "toast" that contains basic styling, along with a JavaScript function that generates different types of toasts based on user input. The function modifies the toast class by inserting icons and text as demonstrated below:

#toast {
        visibility: hidden;
        width: 200px;
        min-height: 40px;
        max-height: 100px;
        border-radius: 5px;
        //various other styling properties
        }

Here is the JavaScript code:

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;
           //additional cases for other types
    }

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

Currently, each time I call the function to create a new toast, it replaces the existing one. However, I want to be able to stack multiple toasts and display multiple feedback messages simultaneously. How can I create multiple instances of my CSS class so that they are not overwritten each time the constructor is called?

javascript css toast

Answer 1

Answer №1

It seems like you've been assigning the ID "toast" to every element. This means that when you try to access the element using document.getElementById("toast"), you're just repeatedly selecting the first element with that ID.

To avoid this issue, consider giving your toast elements a class instead. Here's an example:

<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 style the toast elements based on their classes:

.toast 
{
    visibility: hidden;
    width: 200px;
    min-height: 40px;
    max-height: 100px;
    border-radius: 5px;
    /* Add more styling */
}

.toast.success
{
    /* Styling specific to success toasts */
}

.toast.burnt
{
    /* Styling specific to burnt toasts */
}

This way, you can style your elements without the need for JavaScript!

Answer 2

It seems like you've been assigning the ID "toast" to every element. This means that when you try to access the element using document.getElementById("toast"), you're just repeatedly selecting the first element with that ID.

To avoid this issue, consider giving your toast elements a class instead. Here's an example:

<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 style the toast elements based on their classes:

.toast 
{
    visibility: hidden;
    width: 200px;
    min-height: 40px;
    max-height: 100px;
    border-radius: 5px;
    /* Add more styling */
}

.toast.success
{
    /* Styling specific to success toasts */
}

.toast.burnt
{
    /* Styling specific to burnt toasts */
}

This way, you can style your elements without the need for JavaScript!

I must generate numerous copies of my CSS class using JavaScript

Answer №1

Similar questions

Is it possible to maintain the component's DOM state when navigating away and then returning in Angular?

Replacing the left styling using CSS

Having issues with the width not functioning correctly in my table cells

Using Express and Node.js to display a page populated with information

What could be causing my CSS to not display properly on GitHub Pages?

Guide to capturing mouse drag coordinates using JavaScript within a JSP page

Managing and updating arrays in VueJS2: Conditionally push new items and update only if their properties have changed

CSS - When using both display: flex and position: absolute, the anchor point is shifted

using props as arguments for graphql mutation in react applications

What is the best way to access external value in an Angular directive?

Ways to retrieve the value of an Object that may have a key that is undefined

What could be causing the background image on my element to not update?

Chrome automatically scrolling back to the beginning of the page following a remote form submission

Having trouble modifying a value in a form and submitting it to the following jsp page

How to effectively delete the class from a navigation list item

How do I retain the user's color choice using jQuery cookies for future visits?

Use JavaScript to upload a JSON file containing arrays into separate tabs

Having issues with ToggleClass and RemoveClass functionalities not functioning properly

The vertical overflow from using Bootstrap grid extends into neighboring divs

In Javascript, assign default values to an array and update them with new values upon the click of a