I need choose from dropdown menu one of class, and put it to id=”get”
The switcher work perfectly, thanks to Mister Jojo (Javascript show next prev content appenchild)
my question is,
-
is here more compact, lightly solution than I made with functions in dropdown
-
when I choose from dropdown menu and click to next or prev button, it does not work immediately, only when I click second time
Many Thanks
function tog() {document.getElementById("ts").classList.toggle("show");}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dr = document.getElementsByClassName("ts");
var i;
for (i = 0; i < dr.length; i++) {
var odr = dr[i];
if (odr.classList.contains('show')) {
odr.classList.remove('show');
}
}
}
}
const
dGet = document.getElementById('get')
, dBack = document.getElementById('back')
, slides = document.querySelectorAll('.mySlides')
, current =
{ slide : null
, index : 0
, len : slides.length
};
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] )
}
function f1() {
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var back = document.getElementById("back");
document.getElementById("get").appendChild(one);
back.appendChild(two);
back.appendChild(three);
}
function f2() {
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var back = document.getElementById("back");
document.getElementById("get").appendChild(two);
back.appendChild(one);
back.appendChild(three); }
function f3() {
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var back = document.getElementById("back");
document.getElementById("get").appendChild(three);
back.appendChild(one);
back.appendChild(two); }
#get {
height : 300px;
width : 500px;
border : 1px solid red;
left : 100px;
position : absolute;
}
#back {
display : none;
}
.ts > a.tAr {display:block!important;background-image: linear-gradient(#3d00974a, transparent);}
.teletab {
float:left;
min-width: 160px;
overflow: auto;
z-index: 1;
position: absolute;
background: #1b092d;
max-height: 400px;
overflow-x: hidden;
width: 216px;
}
.teletab a {
padding: 4px 16px;
display: none;
width: 200px;
max-height:40px;
border-style: solid;
border-width: 1px 0 0 0;
color: #2aa;
}
.show a {display: block!important;}
<div class="teletab ts" id="ts">
<a onclick="f1()">first</a>
<a onclick="f2()">second</a>
<a onclick="f3()">third</a>
</div>
<button onclick="tog()" class="dropbtn ddb">
▽
</button>
<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<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>