Necesito hacer una copia de un div a otro div, con el conmutador siguiente, anterior y desplegable
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 }; // add slideSelect option elements for(let indx=0;indx<slides.length;++indx) slideSelect.add( new Option( `slide : ${indx+1}`, indx)); 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 value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi" selected>Audi</option> </select> <div id="back"> <div id="one" class="mySlides"> <span class="Tx1">111</span> </div> <div id="two" class="mySlides"> <span class="Tx1">222</span> </div> <div id="three" class="mySlides"> <span class="Tx1">333</span> </div> </div> <div id="get"></div>Pregunté aquí antes en appendchild, pero ahora descubrí que hacer una copia de la variante al contenido es una solución más liviana, cuando usaré más divs
La solución appendchild está aquí: Javascript show next prev content appenchild
No sé a qué se refiere con querer copiar de un div a otro, pero parece que solo está buscando mostrar contenido desplazándose por él con los botones de navegación o yendo directamente a un elemento seleccionándolo de una lista. .
const output = document.getElementById('output'); const selector = document.getElementById("slide-Selector"); let data = [111,222,333,444]; let index = 0; // represents currently showing data item selector.addEventListener("change", updateSelect); // This will take care of either of the nav buttons getting clicked document.addEventListener("click", function(evt){ // Check to see if it was a button that we care about that was clicked if(evt.target.classList.contains("nav")){ // Call the scroll function and send it the proper scrolling argument if(evt.target.classList.contains("prev")){ scroll(-1); } else { scroll(1); } } }); function scroll(n) { index += n; // Change the index up or down depending on the parameter // Update the index if we go too low or too high if(index < 0){ index = data.length -1; } else if(index === data.length){ index = 0; } output.textContent = data[index]; // Update the output selector.selectedIndex = index; // Select the corresponding item in the list } function updateSelect(){ output.textContent = data[this.selectedIndex]; // Update the output } <button class="nav prev"><</button> <button class="nav next">></button> <select id="slide-Selector"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi" selected>Audi</option> </select> <div id="output"></div>