0
212
VistasJavascript 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>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta