QuerySelector for multiple elements?

Question

JavaScript

Hello, please tell me how to make the script work for st_img_1, st_img_2, st_img_3, st_img_4. Each one needs a slightly different style. Tried through

<script type="text/javascript">
let section = document.querySelectorAll ('.stall');

  window.onscroll = magic;

  function magic(){
    if (window.pageYOffset > 400) {
      section.style.width= '20%'
      section.style.margin= '-100px 0 0 -200px'
      section.style.transition= '1s ease-in-out 0s'
    } else {
      section.style.width= '10%'
      section.style.margin= '0'
    }
  }</script>

doesn't work (when querySelector is 1 element first it works, when all is useless). The scripts are a complete layman, but you need to do it.

Answer 1

In the section variable, you have an array of nodes that you need to iterate over in a loop, for example, using forEach. And then you will already have an instance of one specific section, and you can already execute your code with it

Answer 2

const elements = [...document.querySelectorAll('.stall')];
for (const section of elements) {
  console.log(section);
}