Box styling seemingly not applied when adding new elements with button-CodePudding

Refer to link. Link is to the project "Scroll-Animation" I am cloning in local browser to practice front-end.

I have two buttons, , -. The ' ' adds new boxes, the '-' removes boxes from the body. I implemented the ' ' but it seems the styling for boxes is not working. That is, it seems to add the "div" elements I created to body but the div's are not style like I have them in .css file for .box { ... } Any help with how to fix this is greatly appreciated. Thanks!

style.css

...
.box {
    height: 200px;
    width: 400px;
    border-radius: 10px;
    background-color: steelblue;
    margin: 10px;
    color: white;
    display: grid;
    place-items: center;
    box-shadow: 2px 4px 5px rgba(0,0,0,.3);
    transform: translateX(-400%);
    transition: transform .5s ease;
}
.box:nth-of-type(even) {
    transform: translateX(400%);
}
.box.show {
    transform: translateX(0);
}
...

app.js

const boxes = document.querySelectorAll('.box');
const btns = document.querySelectorAll('.btn');

window.addEventListener('scroll', slideBox);

slideBox();

// NOTE: Need to fix.
btns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        const cList = e.currentTarget.classList;

        if (cList.contains('add')) {
            console.log('Work');
            var h2 = document.createElement('h2');
            h2.innerHTML = 'Content';
            var newBox = document.createElement("div");
            var attr = document.createAttribute("class");

            attr.value = "box";
            newBox.setAttributeNode(attr);
            newBox.appendChild(h2);
            document.body.appendChild(newBox);
        }
    })
})

// NOTE: This function works!!!
function slideBox() {

    const pageBot = window.innerHeight / 5 * 4;
    const pageTop = window.innerHeight / 5 * 1;

    boxes.forEach(box => {
        const boxTop = box.getBoundingClientRect().top;
        const boxBot = box.getBoundingClientRect().bottom;

        if (boxTop < pageBot && boxBot > pageTop) {
            box.classList.add('show');
        } else {
            box.classList.remove('show');
        }
    })
}

index.html

<body>
    <h1>Scroll to see the animation</h1>
    <div >
        <button > </button>
        <button >-</button>
    </div>
    <!-- <div ><h2>Content</h2></div>
    <div ><h2>Content</h2></div>
    ...
    <div ><h2>Content</h2></div>  -->
    <script src="app.js"></script>
</body>

CodePudding user response：

I think the problem is after you add a new box, but afterward you don't query all boxes again in slideBox. You can check the fix here

The full modification in Javascript with some comments

const btns = document.querySelectorAll('.btn');

window.addEventListener('scroll', slideBox)

slideBox();

btns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    const cList = e.currentTarget.classList;

    if (cList.contains('add')) {
      console.log('Work');
      var h2 = document.createElement('h2');
      h2.innerHTML = 'Content';
      var newBox = document.createElement("div");
      var attr = document.createAttribute("class");

      attr.value = "box";
      newBox.setAttributeNode(attr);
      newBox.appendChild(h2);
      document.body.appendChild(newBox);
    }
  })
})


function slideBox() {
  //query all boxes every time you scroll because of new boxes
  const boxes = document.querySelectorAll('.box')
  const triggerBottom = window.innerHeight / 5 * 4

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top

    if (boxTop < triggerBottom) {
      box.classList.add('show')
    } else {
      box.classList.remove('show')
    }
  })
}