Question

0

207

Views

Javascript clonenode clone copy to id with dropdown next prev buttons

please I need solution for my design program, with clonenode/copy

from one big div where user can choose what he would have on concretly id/content, so he could switch it with arrows or choose from dropdown menu,

but I have now solution only with appenchild from div

and, if user add some next content, next id, it will have same big div / it will duplicated so the file will bigger ....

so I need have only one big div from where it will clone or copy to concretly div and this div will not duplicate

many thanks for yours answers

const
  dGet        = document.getElementById('get')
, dBack       = document.getElementById('back')
, slides      = document.querySelectorAll('.mySlides')
, slideSelect = document.querySelector('#slide-Selector')
, current = 
  { slide : null
  , index : 0
  , len   : slides.length
  }; 

 
slideSelect.onchange =()=>
  {
  current.index = slideSelect.selectedIndex;
  plusDivs(0);
  }

  // init
plusDivs(0);

function plusDivs(n)
  {
    // more easy with a modulo...
  current.index = (current.index +n +current.len) % current.len;
  
  if (current.slide)
    dBack.appendChild( current.slide );
  
  current.slide = dGet.appendChild( slides[current.index] );

  slideSelect.selectedIndex = current.index; // added
  }

#get {
  height   : 300px;
  width    : 500px;
  border   : 1px solid red;
  left     : 100px;
  position : absolute;
  }
#back {
  display : none;
  }

<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<select id="slide-Selector">
   <option>slideshow1</option>
  <option>slideshow2</option>
  <option>slideshow3</option>
</select>
<div id="back">
  <div id="one" class="mySlides">
    <span class="Tx1">slideshow1</span>
  </div>
  <div id="two" class="mySlides">
    <span class="Tx1">slideshow2</span>
  </div>
  <div id="three" class="mySlides">
    <span class="Tx1">slideshow3</span>
  </div>
</div>
<div id="get"></div>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T07:56:19.847Z

I used removeChild and cloneNode:

const
  dGet        = document.getElementById('get')
, dBack       = document.getElementById('back')
, slides      = document.querySelectorAll('.mySlides')
, slideSelect = document.querySelector('#slide-Selector')
, current = 
  { slide : null
  , index : 0
  , len   : slides.length
  }
; 

 
slideSelect.onchange =()=>
  {
  current.index = slideSelect.selectedIndex;
  plusDivs(0);
  }

  // init
plusDivs(0);

function plusDivs(n)
  {
    // more easy with a modulo...
  current.index = (current.index +n +current.len) % current.len;
  
  if (current.slide)
    dGet.removeChild( current.slide );
  
  
var clon = slides[current.index].cloneNode(true);
      current.slide = dGet.appendChild(clon);
    

  slideSelect.selectedIndex = current.index; // added
  }

#get {
  height   : 300px;
  width    : 500px;
  border   : 1px solid red;
  left     : 100px;
  position : absolute;
  }
#back {
  display : none;
  }

<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<select id="slide-Selector">
   <option>slideshow1</option>
  <option>slideshow2</option>
  <option>slideshow3</option>
</select>
<div id="back">
  <div id="one" class="mySlides">
    <span class="Tx1">slideshow1</span>
  </div>
  <div id="two" class="mySlides">
    <span class="Tx1">slideshow2</span>
  </div>
  <div id="three" class="mySlides">
    <span class="Tx1">slideshow3</span>
  </div>
</div>
<div id="get"></div>

0

207

Javascript clonenode clone copy to id with dropdown next prev buttons

1 answers

0

Find remote jobs

Andres GPT