Adding className to the created elements from objects by javascript

Question

I practice javascript. I'd like to add class name (.is-slideUp) to the created each card__item elements, which comes from data object, to put sliding-up animation.

.is-slideUp class name shows in console but doesn't in elements. Tried settimeout but doesn't help.

I want each ones like this: <div class="card__item is-slideUp"> Then, each ones slides up when scrolling up.

Does anyone know the solutions? Thank you.

  const data = [
    {
      content: [
        { card: "Card Title 1", text: "Card Text 1 Card Text 1 Card Text 1" },
        { card: "Card Title 2", text: "Card Text 2 Card Text 2 Card Text 2" },
        { card: "Card Title 3", text: "Card Text 3 Card Text 3 Card Text 3" },
        { card: "Card Title 4", text: "Card Text 4 Card Text 4 Card Text 4" },
        { card: "Card Title 5", text: "Card Text 5 Card Text 5 Card Text 5" },
        { card: "Card Title 6", text: "Card Text 6 Card Text 6 Card Text 6" },
      ],
    },
  ];

  const output = document.querySelector(".card__output");
  async function load() {
    const json = await data;

    for (let i in json) {
      const wrap = document.createElement("div");
      wrap.className = "card__wrap";

      for (let j in json[i].content) {
        const card = document.createElement("div");
        card.className = "card__item";

        const h3 = document.createElement("h3");
        h3.className = "card__title";
        h3.textContent = `${json[i].content[j].card}`;

        const p = document.createElement("p");
        p.className = "card__text";
        p.textContent = `${json[i].content[j].text}`;

        wrap.appendChild(card);
        card.appendChild(h3);
        card.appendChild(p);
      }

      output.appendChild(wrap);
    }
  }
  load();

  slideUp();

  const windowHeight = window.innerHeight;
  const cards = document.querySelectorAll(".card__item");

  function slideUp() {
    window.addEventListener("scroll", function () {
      for (let i = 0; i < cards.length; i++) {
        console.log(cards[i]);
        if ( windowHeight > cards[i].getBoundingClientRect().top + windowHeight / 5 ) {
          cards[i].classList.add("is-slideUp");
        }
      }
    });
  }

  * {
    margin: 0;
    padding: 0;
  }
  header,
  footer {
    height: 200px;
    background: #ccc;
  }
  .card__output {
    width: 100%;
    height: 100%;
  }
  .card__wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    margin-left: calc(-10% / 3);
  }
  .card__item {
    /* opacity: 0; */
    transition: all 1s;
    transform: translateY(200px);
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 300px;
    margin-top: 30px;
    margin-left: calc(10% / 3);
    background: #ededed;
  }
  .card__title {
    margin: 1.8rem auto;
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
  }
  .is-slideUp {
    background: pink;
    opacity: 1;
    transform: translateY(0);
  }

<header>header</header>
<div class="card__output">
  <!--output data object-->
</div>
<footer>footer</footer>

Answer 1

The problem is that you are trying to add a class to an element which is asynchronously created in a "synchronous" way.

Modify your javascript to the following:

load().then((res) => {
    slideUp();
  });

  function slideUp() {
  const windowHeight = window.innerHeight;
  const cards = document.querySelectorAll(".card__item");  
    window.addEventListener("scroll", function () {

      for (let i = 0; i < cards.length; i++) {
        console.log(cards[i]);
        if ( windowHeight > cards[i].getBoundingClientRect().top + windowHeight / 5 ) {
          cards[i].classList.add("is-slideUp");
        }
      }
    });
  }

Answer 2

You can add multiple classes as card.className = "card__item is-slideUp";