How can I multiply my element created with JS

                container = document.querySelector('.itemContainer');       

                for(i = 0; i < 30; i++){
                    container.innerHTML += '<div class="item"></div>';
        

                    if((i % 5) == 0){ 
                        document.querySelectorAll('.item')[i].style.setProperty("--width", 4+"px");
                    }       

                    document.querySelectorAll('.item')[i].style.transform = "rotate(" + i * 6 + "deg)";     
                }

                * {
                    margin       : 0;
                    padding:   : 0;
                    box-sizing : border-box;
                }

                body {
                    width                   : 100%;
                    height                  : 100vh;
                    display                 : flex;
                    justify-content : center;
                    align-items         : center;
                }

                .mainContainer {
                    position                 : relative;
                    width                    : 440px;
                    height                   : 200px;
                    display                  : flex;
                    justify-content  : center;
                    align-items          : center;
                    justify-content  : space-around;
                    border-radius    : 5px;
                    border                   : 1px solid black;
                    background-color : silver;
                }

                .itemContainer{
                    position                : relative;
                    width                   : 130px;
                    height                  : 130px;
                    display                 : flex;
                    justify-content : center;
                    align-items         : center;
                    border-radius   : 50%;
                }

                .item {
                    position                : absolute;
                    width                   :2px;
                    height                  :100%;
                    display                 : flex;
                    justify-content : center;
                }

                .item::before {
                    top              : 0px;
                    content      : '';
                    position     : absolute;
                    background : var(--background, black);
                    width        : var(--width, 2px);
                    height       : 10px;
                    text-align : center;
                }

                .item::after {
                    bottom       : 0px;
                    content      : '';
                    position   : absolute;
                    background : var(--background, black);
                    width        : var(--width, 2px);                       
                    height       : 10px;
                }

            <div class="mainContainer">
                <div class="itemContainer">H</div>
                <div class="itemContainer">M</div>
                <div class="itemContainer">S</div>
            </div>

 I want to use my "Clock Dial" drawn with JS in different Divs.

Couldn’t multiply it. I’m confused. Thanks for all efforts to help.

Each div will show the parts of a clock: Hour, Minute, Second.

Thanks for any efforts to help. Hope the code is clear enough.

I have pasted “lorem” text below to send my question? ! 🙂

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eum enim optio ut quisquam? Iusto, iure veniam alias, ducimus reprehenderit laboriosam eum aut molestiae dolor esse saepe facilis dolore consequatur autem quaerat illum inventore quia sint libero nesciunt!

Answer

You have to create a function and reuse the code like this

Update HTML with:

<div class="mainContainer">
  <div id="h" class="itemContainer">H</div>
  <div id="m" class="itemContainer">M</div>
  <div id="s" class="itemContainer">S</div>
</div>

JS:

function makeCircle(circle) {
  container = document.querySelector('#'+circle);

  for(i = 0; i < 30; i++){
    container.innerHTML += '<div class="item '+circle+' "></div>';
    if((i % 5) == 0){ 
      document.querySelectorAll('.item.'+circle)[i].style.setProperty("--width", 4+"px");
    }       
    document.querySelectorAll('.item.'+circle)[i].style.transform = "rotate(" + i * 6 + "deg)";     
  }
}

makeCircle('h');
makeCircle('m');
makeCircle('s');

Advertisement

Answer