I need make copy from one div to another div, with switcher next prev and dropdown
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>Im ask here before on appendchild, but now Im found out that make copy of variant to content is lighter solution, when I will use more divs
appendchild solution is here: Javascript show next prev content appenchild
I don't know what you mean by wanting to copy from one div to another, but it seems like you are just looking to display content either by scrolling through it with nav buttons or by going straight to an item by selecting it from a list.
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>