There is a block ( https://codepen.io/antoha-sozon/pen/BGLKGQ ). If you press the "right" or "down" buttons in it, a block will be added relative to the main one. But, in the added blocks, buttons are not pressed. Tell me how to clone a block?

var addRight = document.getElementById("addRight"); var addBottom = document.getElementById("addBottom"); var controlBlocks = document.getElementById("controlBlocks"); addRight.onclick = function() { var innerControlBlock = document.getElementById("innerControlBlock"); var clone = innerControlBlock.cloneNode(true); var rect = clone.getBoundingClientRect(); clone.style.left = rect.left + '270px'; controlBlocks.appendChild(clone); } addBottom.onclick = function() { var innerControlBlock = document.getElementById("innerControlBlock"); var clone = innerControlBlock.cloneNode(true); var rect = clone.getBoundingClientRect(); clone.style.top = rect.top + '270px'; controlBlocks.appendChild(clone); } 
 .control-blocks { position: relative; } .inner-control-block { width: 250px; height: 250px; background-color: red; position: absolute; top: 0; left: 0; margin: 10px; } .inner-control-block a { cursor: pointer; } .inner-control-block a:first-child { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #fff; text-decoration: none; text-transform: uppercase; background-color: #000; padding: 5px 10px; } .inner-control-block a:last-child { display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; text-decoration: none; text-transform: uppercase; background-color: #000; padding: 5px 10px; } 
 <div id="controlBlocks" class="control-blocks"> <div id="innerControlBlock" class="inner-control-block"> <a id="addRight">Вправо</a> <a id="addBottom">Вниз</a> </div> </div>

  • one
    And nothing that you clone blocks, and with them unique identifiers are cloned? =) - Arthur
  • I have already thought about it, but how to make sure that the aydishniki were new and events were hung on them - Anton Sozonenko
  • @ Anton Sozonenko if the element is not unique or its cloning is supposed, then you need to use a class , not an id . - UModeL

1 answer 1

 window.onload = function() { var controlBlocks = document.querySelector('.control-blocks'); function fAddBlock(e) { let clone = this.cloneNode(true); let rect = this.getBoundingClientRect(); if (e.target.classList.contains('addRight')) { clone.style.left = rect.left + 270 + 'px'; } if (e.target.classList.contains('addBottom')) { clone.style.top = rect.top + 270 + 'px'; } clone.addEventListener('click', fAddBlock); controlBlocks.appendChild(clone); } document.querySelector('.inner-control-block').addEventListener('click', fAddBlock); } 
 .control-blocks { position: relative; } .inner-control-block { width: 250px; height: 250px; background-color: red; position: absolute; top: 0; left: 0; margin: 10px; } .inner-control-block a { cursor: pointer; } .inner-control-block a:first-child { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #fff; text-decoration: none; text-transform: uppercase; background-color: #000; padding: 5px 10px; } .inner-control-block a:last-child { display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; text-decoration: none; text-transform: uppercase; background-color: #000; padding: 5px 10px; } 
 <div class="control-blocks"> <div class="inner-control-block"> <a class="addRight">Вправо</a> <a class="addBottom">Вниз</a> </div> </div>

  • Thank you, but after 4-5 clicks, the position gets lost - Anton Sozonenko
  • @ Anton Sozonenko is strange ... I don’t get lost. I left all the checks at your discretion and improvements, because I answered the question, but did not do it on a turnkey basis, but in my version, everything works fine. - UModeL