We Keep Coding

How do you manipulate html code which was created in JavaScript?

I'm having a problem with referencing newly created HTML which was created using JavaScript. Unfortunately, I cannot seem to access the newly created html for whatever reason. I've programmed the code to where I can display the numbers, but I cannot then manipulate them. Here is the code:
let activ = document.querySelector("#fizbuz--btn");
0
let rever = document.querySelector("#fizbuz--btn1");
let displ = document.querySelector("#fizbuz--btn2");
let numbers = document.querySelector(".numbers")
let numberss = document.querySelectorAll(".num")
displ.addEventListener("click", () => {
for (i = 0; i < 22; i++) {
numbers.innerHTML += `<div class="num">${i}</div>`
}
})
if (displ.clicked == true) {
activ.addEventListener("click", () => {
for (i = 0; i < numberss.length; i++) {
if (numberss[i].innerHTML % 3 == 0 && numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "blue"
} else if (numberss[i].innerHTML % 3 == 0) {
numberss[i].style.backgroundColor = "red";
} else if (numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "orange"
}
}
})
rever.addEventListener("click", () => {
for (i = 0; i < numbers.length; i++) {
numbers[i].style.backgroundColor = "rgb(61, 133, 117)"
}
})
}
<div class="bg-color">
<div class="navbar">
<div class="nav--head">Home</div>
<div class="nav--head">About</div>
<div class="nav--head">Contact</div>
</div>
</div>
<div class="subHeading">
This is just for practice. <br> This will be styled using CSS.
</div>
<div class="fbinfo">
<div class="subhead">Multiples of 3 shall be highlighed in red</div>
<div class="subhead">Multiples of 5 shall be highlighed in orange</div>
<div class="subhead">Multiples of 3 and 5 shall be highlighed in blue</div>
</div>
<div class="fizbuzz">
<div class="btns">
<button id="fizbuz--btn2">Click Me for NUMBERS</button>
<button id="fizbuz--btn">Click Me for FIZZBUZZ</button>
<button id="fizbuz--btn1">Click Me for REVERSE</button>
</div>
<div class="numbers">
<!-- <div class="num">1</div> <div class="num">2</div>
<div class="num">3</div> <div class="num">4</div>
<div class="num">5</div> <div class="num">6</div>
<div class="num">7</div> <div class="num">8</div>
<div class="num">9</div> <div class="num">10</div>
<div class="num">11</div> <div class="num">12</div>
<div class="num">13</div> <div class="num">14</div>
<div class="num">15</div> <div class="num">16</div>
<div class="num">17</div> <div class="num">18</div>
<div class="num">19</div> <div class="num">20</div> -->
</div>
</div>

You need to assign numberss after you add the elements to the DOM. So the assignment has to be in the click listener.
There's no clicked property on button elements, so if (displ.clicked == true) will never succeed and should be removed. You can add a check for whether the numbers have been created to the beginning of the other event listeners.
let activ = document.querySelector("#fizbuz--btn");
let rever = document.querySelector("#fizbuz--btn1");
let displ = document.querySelector("#fizbuz--btn2");
let numbers = document.querySelector(".numbers")
let numberss;
displ.addEventListener("click", () => {
for (i = 0; i < 22; i++) {
numbers.innerHTML += `<div class="num">${i}</div>`
}
numberss = document.querySelectorAll(".num")
})
activ.addEventListener("click", () => {
if (!numberss) {
alert("click on NUMBERS first");
return;
}
for (i = 0; i < numberss.length; i++) {
if (numberss[i].innerHTML % 3 == 0 && numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "blue"
} else if (numberss[i].innerHTML % 3 == 0) {
numberss[i].style.backgroundColor = "red";
} else if (numberss[i].innerHTML % 5 == 0) {
numberss[i].style.backgroundColor = "orange"
}
}
})
rever.addEventListener("click", () => {
if (!numberss) {
alert("click on NUMBERS first");
return;
}
for (i = 0; i < numberss.length; i++) {
numberss[i].style.backgroundColor = "rgb(61, 133, 117)"
}
})
<div class="bg-color">
<div class="navbar">
<div class="nav--head">Home</div>
<div class="nav--head">About</div>
<div class="nav--head">Contact</div>
</div>
</div>
<div class="subHeading">
This is just for practice. <br> This will be styled using CSS.
</div>
<div class="fbinfo">
<div class="subhead">Multiples of 3 shall be highlighed in red</div>
<div class="subhead">Multiples of 5 shall be highlighed in orange</div>
<div class="subhead">Multiples of 3 and 5 shall be highlighed in blue</div>
</div>
<div class="fizbuzz">
<div class="btns">
<button id="fizbuz--btn2">Click Me for NUMBERS</button>
<button id="fizbuz--btn">Click Me for FIZZBUZZ</button>
<button id="fizbuz--btn1">Click Me for REVERSE</button>
</div>
<div class="numbers">
<!-- <div class="num">1</div> <div class="num">2</div>
<div class="num">3</div> <div class="num">4</div>
<div class="num">5</div> <div class="num">6</div>
<div class="num">7</div> <div class="num">8</div>
<div class="num">9</div> <div class="num">10</div>
<div class="num">11</div> <div class="num">12</div>
<div class="num">13</div> <div class="num">14</div>
<div class="num">15</div> <div class="num">16</div>
<div class="num">17</div> <div class="num">18</div>
<div class="num">19</div> <div class="num">20</div> -->
</div>
</div>

1 button to toggle 3 sort variations

I have 3 buttons in my view. Each of them have single work to do.
Now I want them to be a one key that is doing 3 things:
With each click toggling through each sort
const buttonAsc = document.getElementById("Sort-item-asc")
const buttonDesc = document.getElementById("Sort-item-desc")
const buttonNo = document.getElementById("Sort-item-no")
const times = document.getElementsByClassName("time")
const originalHours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
originalHours.push(hour)
}
buttonAsc.onclick = function() {
let hours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
hours.push(hour)
}
hours.sort()
for (let i = 0; i < hours.length; i++) {
times[i].firstElementChild.innerText = hours[i];
}
}
buttonDesc.onclick = function() {
let hours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
hours.push(hour)
}
hours.sort()
hours.reverse()
for (let i = 0; i < hours.length; i++) {
times[i].firstElementChild.innerText = hours[i];
}
}
buttonNo.onclick = function() {
for (let i = 0; i < originalHours.length; i++) {
times[i].firstElementChild.innerText = originalHours[i];
}
}
<div class="full-item">
<div class="buttons">
<div class="button-item">
<button id="Sort-item-asc">Sort Asc</button>
</div>
<div class="button-item">
<button id="Sort-item-desc">Sort Desc</button>
</div>
<div class="button-item">
<button id="Sort-item-no">No Sort</button>
</div>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>

You could create a super-array that has the three versions of the list (ascending, descending, unsorted). Then at every click extract the first list from that super-array, and at the same time add it again at the back of the list. Use this list for the display:
const button = document.getElementById("Sort-item");
const times = [...document.getElementsByClassName("time")];
const originalHours = times.map(time => time.textContent);
// Pre-build the three versions of the list
const allHours = [[...originalHours].sort(), [...originalHours].sort().reverse(), originalHours];
button.addEventListener("click", function() {
// Cycle the three lists:
const hours = allHours.shift();
allHours.push(hours);
for (let i = 0; i < hours.length; i++) {
times[i].firstElementChild.textContent = hours[i];
}
});
<div class="full-item">
<div class="buttons">
<div class="button-item">
<button id="Sort-item">Sort Toggle</button>
</div>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>
If you need the div elements to be relocated (because you had specific attributes on them or references to them), then you could store them similarly in the arrays:
const button = document.getElementById("Sort-item");
const container = document.querySelector(".item-sort");
const times = [...document.querySelectorAll(".time")];
const originalItems = times.map(time => [time.parentNode, time.textContent]);
const sortedItems = [...originalItems].sort((a,b) => a[1].localeCompare(b[1]))
.map(a => a[0]); // Only keep node reference
// Pre-build the three versions of the list
const allItems = [sortedItems, [...sortedItems].reverse(),
originalItems.map(a => a[0])];
button.addEventListener("click", function() {
// Cycle the three lists:
const items = allItems.shift();
allItems.push(items);
for (const item of items) {
container.appendChild(item);
}
});
<div class="full-item">
<div class="buttons">
<div class="button-item">
<button id="Sort-item">Sort Toggle</button>
</div>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>

Have you considered keeping only one button?
You could a global variable "count" that you increment each time the button is clicked. Then, with an "if" statement, you could fire each of the three functions, depending on the value of the counter?

A more user friendly approach would be to use a dropdown instead of multiple clicks.
Allowing you to choose which sort method you want instead of having to determine what happened from the result.
const sortOptions = document.getElementById('Sort-options');
const times = document.getElementsByClassName("time");
const originalHours = [];
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
originalHours.push(hour)
}
sortOptions.addEventListener('change', function(event){
let selection = event.target.value;
let hours = originalHours.slice();
if (selection === 'Sort Asc') {
hours.sort();
}
if (selection === 'Sort Desc') {
hours.sort().reverse()
}
for (let i = 0; i < hours.length; i++) {
times[i].firstElementChild.innerText = hours[i];
}
});
<div class="full-item">
<select id="Sort-options">
<option value="" selected>No Sort</option>
<option value="Sort Asc">Sort Asc</option>
<option value="Sort Desc">Sort Desc</option>
</select>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>

I understand you want to move the item div around
const button = document.getElementById("sort");
const items = document.querySelectorAll(".item");
const times = document.querySelectorAll(".time");
const container = document.querySelector(".item-sort");
const originalHours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
originalHours.push(hour);
items[i].setAttribute("data-time",hour); // add the time to the item div
}
const sortClasses = ["nosort","asc","desc"];
let cnt = 0;
button.addEventListener("click",function() {
let hours = originalHours.slice();
this.className="";
cnt++;
if (cnt>=sortClasses.length) cnt=0;
this.classList.toggle(sortClasses[cnt]);
if (this.classList.contains("asc")) {
hours.sort();
this.innerText = "Descending";
}
else if (this.classList.contains("desc")) {
hours.sort().reverse();
this.innerText = "Unsorted";
}
else this.innerText = "Ascending";
for (let i = 0; i < hours.length; i++) {
let sel = "[data-time='"+hours[i]+"']"; // selector based on time
let itemDiv = document.querySelector(sel);
if (itemDiv) container.appendChild(itemDiv);
}
});
<div class="full-item">
<div class="buttons">
<div class="button-item">
<button id="sort" class="nosort" title="Click to sort">Ascending</button>
</div>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"><img src="https://via.placeholder.com/300.png/9ff?text=15:20" /></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"><img src="https://via.placeholder.com/300.png/99f?text=13:10" /></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"><img src="https://via.placeholder.com/300.png/ff9?text=18:40" /></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>

There are many ways to do this and one of them is as follow
const buttonAsc = document.getElementById("Sort-item-asc")
const buttonDesc = document.getElementById("Sort-item-desc")
const buttonNo = document.getElementById("Sort-item-no")
const times = document.getElementsByClassName("time")
const originalHours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
originalHours.push(hour)
}
buttonAsc.onclick = function() {
let hours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
hours.push(hour)
}
hours.sort()
for (let i = 0; i < hours.length; i++) {
times[i].firstElementChild.innerText = hours[i];
}
buttonAsc.parentElement.classList.remove("active");
buttonDesc.parentElement.classList.add("active");
}
buttonDesc.onclick = function() {
let hours = []
for (let i = 0; i < times.length; i++) {
const hour = times[i].innerText;
hours.push(hour)
}
hours.sort()
hours.reverse()
for (let i = 0; i < hours.length; i++) {
times[i].firstElementChild.innerText = hours[i];
}
buttonDesc.parentElement.classList.remove("active");
buttonNo.parentElement.classList.add("active");
}
buttonNo.onclick = function() {
for (let i = 0; i < originalHours.length; i++) {
times[i].firstElementChild.innerText = originalHours[i];
}
buttonNo.parentElement.classList.remove("active");
buttonAsc.parentElement.classList.add("active");
}
.button-item {
display: none;
}
.button-item.active{
display: block;
}
<div class="full-item">
<div class="buttons">
<div class="button-item active">
<button id="Sort-item-asc">Sort Asc</button>
</div>
<div class="button-item">
<button id="Sort-item-desc">Sort Desc</button>
</div>
<div class="button-item">
<button id="Sort-item-no">No Sort</button>
</div>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>

searchbar alert when there is no match jQuery

I made simple searchbar for my app. Right now it searching the users by data attribute but when it doesn't find any match it display nothing. I want it to show error message when there is no match. I made if statement but it only display when I type something into input and delete it. How to display error message immediately when searchbar doesn't find any user.
JS
$(document).ready(function () {
// Pokaż/Ukryj wyszukiwarkę
$('.show-hide-search-bar').on('click', function () {
if ($('.searcher-section').is(":visible")) {
$('.searcher-section').hide("slide");
$('.show-hide-search-bar').text('Pokaż Wyszukiwarkę');
} else {
$('.searcher-section').show("slide");
$('.show-hide-search-bar').text('Ukryj Wyszukiwarkę');
}
});
// Zmiana tekstu w zależności od pojawienia się searchera
if ($('#agents').length > 0) {
$('#label-searchbar').html('Imię, Nazwisko, Adres email');
$('#input-searchbar').attr('placeholder', 'Podaj imię, nazwisko lub adres email');
} else if ($('#company').length > 0) {
$('#label-searchbar').html('Nazwa biura');
$('#input-searchbar').attr('placeholder', 'Podaj nazwę biura');
}
//Dynamiczne wyszukiwanie .card dla agentów | .clearfix dla listy
$('.searcher-input').keyup(function (event) {
$('.null-data').hide();
if ($(this).val()) {
var input = $(this).val();
var trimmedInput = input.trim();
var terms = input.split(/\W+/g);
$(".card").hide();
$(".clearfix.alt").hide();
$(".card[data-agent*='" + trimmedInput + "' i]").show();
$(".clearfix[data-name*='" + trimmedInput + "' i]").show();
// $(".card[data-lastname*='" + trimmedInput + "']").show();
// $(".card[data-lastname*='" + trimmedInput + "'][data-firstname*='" + trimmedInput + "']").show();
// $(".card[data-email*='" + trimmedInput + "']").show();
$(".col-xs-12").css("min-height", "0");
$(".col-md-4").css("min-height", "0");
$(".col-sm-5").css("min-height", "0");
if ($('.card').is(':visible').get(0)) {
$('.null-data').show(function () {
$(this).effect("shake");
});
}
if (!$('.clearfix').is(':visible').get(0)) {
$('.null-data').show(function () {
$(this).effect("shake");
});
}
} else {
$(".clearfix.alt").show();
$(".card").show();
$('.null-data').show(function () {
$(this).effect("shake");
});
}
});
});
HTML
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="searcher-section" style="display: none">
<div class="show-hide-searcher">
<div class="input-section">
<div class="label-input-searcher">
<label for="" class="searcher-label" id="label-searchbar"></label>
<input type="text" placeholder=""
class="searcher-input form-control" id="input-searchbar"/>
<div class="null-data" style="display: none;">Wprowadź poprawne dane</div>
</div>
</div>
</div>
</div>
</div>
<div class="show-hide-section">
<button class="btn btn-success show-hide-search-bar" id="searchbar-button">Pokaż wyszukiwarkę</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h3 class="title" id="agents">Doradcy</h3>
<div class="cards">
#foreach($agents as $agent)
<div class="col-xs-12 col-sm-5 col-md-4">
<div class="card" data-agent="{{$agent->firstname}} {{$agent->lastname}} {{$agent->email}}">
<figure>
<div class="img-ref">
<a href=""
class="">
#if(isset($agent->has_avatar) && $agent->has_avatar !== 0)
<div style="background: url(''); background-size: cover;" class="photo"></div>
#else
<div style="background: url(''); background-size: cover;"
class="photo"></div>
#endif
</a>
</div>
<ul>
<li>
<a href=""
class="teamLink agent-color">
<h3 class="agent-name">{{$agent->firstname}} {{$agent->lastname}}</h3> </a>
</li>
</ul>
#if(isset($agent->company_name))
<div class="teams-summary">
{{$agent->company_name}}
</div>
#endif
<div class="contact-position">
{{--telefon kontaktowy--}}
<div class="mobile-info card-contact-info">
{{$agent->phone}}
</div>
{{--adres mailowy--}}
<div class="email-info card-contact-info">
{{$agent->email}}
</div>
</div>
</figure>
</div>
</div>
#endforeach
</div>
{{----}}
</div>
</div>

check element length
........
$(".clearfix.alt").hide();
if($(".card[data-agent*='" + trimmedInput + "' i]").length == 0) {
alert("no result");
return;
}
$(".card[data-agent*='" + trimmedInput + "' i]").show();
....

Why div inside div is color is not changing through JavaScript array

var ar = ['.two_in','.three_in','.four_in'], pb = "> *";
ar.forEach(function(x){
var sel = document.querySelectorAll( x + pb);
var colors = {};
colors[ar[0]] = 'blue';
colors[ar[1]] = 'green';
colors[ar[2]] = 'red';
for(var i = 0;i<sel.length;i++){
sel[i].style.backgroundColor = colors[sel[i].className];
}
})
<div class="two_in">
<div class="demo">blue</div>
<div class="demo">blue</div>
<div class="demo">blue</div>
</div>
<br>
<div class="three_in">
<div class="demo">green</div>
<div class="demo">green</div>
<div class="demo">green</div>
</div>
<br>
<div class="four_in">
<div class="demo">red</div>
<div class="demo">red</div>
<div class="demo">red</div>
</div>
I want to change all div color inside two_in to blue, three_in to green, and four_in to red respectively, what's the missing code? Can anyone explain it?
Example:
The all div inside two_in (three div whose div class is demo) should be blue color and as for the three_in and four_in.

Here is the mistake:
colors[ar[0]] = 'blue';
colors[ar[1]] = 'green';
colors[ar[2]] = 'red';
It is assigning a non primitive index there. What you need to is:
var ar = ['.two_in', '.three_in', '.four_in'],
pb = " > *";
ar.forEach(function(x) {
var sel = document.querySelectorAll(x + pb);
var colors = {};
colors[0] = 'blue';
colors[1] = 'green';
colors[2] = 'red';
for (var i = 0; i < sel.length; i++) {
sel[i].style.backgroundColor = colors[i];
}
})
<div class="two_in">
<div class="demo">blue</div>
<div class="demo">blue</div>
<div class="demo">blue</div>
</div>
<br>
<div class="three_in">
<div class="demo">green</div>
<div class="demo">green</div>
<div class="demo">green</div>
</div>
<br>
<div class="four_in">
<div class="demo">red</div>
<div class="demo">red</div>
<div class="demo">red</div>
</div>
Is the above what you want? Or, if you need the colour based on the text, then...
var ar = ['.two_in', '.three_in', '.four_in'],
pb = " > *";
ar.forEach(function(x) {
var sel = document.querySelectorAll(x + pb);
var colors = {};
colors['blue'] = 'blue';
colors['green'] = 'green';
colors['red'] = 'red';
for (var i = 0; i < sel.length; i++) {
sel[i].style.backgroundColor = colors[sel[i].innerHTML.trim()];
}
})
<div class="two_in">
<div class="demo">blue</div>
<div class="demo">blue</div>
<div class="demo">blue</div>
</div>
<br>
<div class="three_in">
<div class="demo">green</div>
<div class="demo">green</div>
<div class="demo">green</div>
</div>
<br>
<div class="four_in">
<div class="demo">red</div>
<div class="demo">red</div>
<div class="demo">red</div>
</div>

Change slider's next and previous button to be previews of upcoming or previous pictures

Hey so i have a slider and i need to change the next and previous button backgrounds to show a preview of the next and previous slide. I don't know if it's possible without jQuery but since i'm working on an all javascript slider i'd very much appreciate a javascript solution
This is the HTML
<body onload="Load()"
<div class="container">
<div class="slider">
<div class="slides" id="slide1">
<img src="img/1.jpg">
</div>
<div class="slides" id="slide2">
<img src="img/2.jpg">
</div>
<div class="slides" id="slide3">
<img src="img/3.jpg">
</div>
</div>
<div class="ctrl">
<div class="prev">
<input type="button" onClick="prev();">
</div>
<div class="next">
<input type="button" onClick="next();">
</div>
</div>
</div>
</body>
And the Javascript
nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
Effect();
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}
PS: I do realize that this is doable in jQuery but i need a javascript solution. And if you are going to downvot at least leave a reason

nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
ShowNextPrev(nrShown);
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
ShowNextPrev(nrShown);
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
ShowNextPrev(nrShown);
Effect();
}
function ShowNextPrev(nrShown)
{
var nrShown2 = nrShown == nrSlide-1 ? -1 : nrShown;
document.querySelector(".next").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown2+1].src+")";
document.querySelector(".next").querySelector("input").style.backgroundSize = "contain";
var nrShown3 = nrShown == 0 ? nrSlide : nrShown;
document.querySelector(".prev").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown3-1].src+")";
document.querySelector(".prev").querySelector("input").style.backgroundSize = "contain";
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}
Load();
.ctrl > div {
display: inline-block;
}
.slides > img {
height: 40px;
}
<div class="slider">
<div class="ctrl">
<div class="prev">
<input type="button" onClick="prev();">
</div>
<div class="next">
<input type="button" onClick="next();">
</div>
</div>
<div class="slides" id="slide1">
<img src="https://lh6.googleusercontent.com/-Ze9FLpwZjdE/AAAAAAAAAAI/AAAAAAAAAA8/YOtXVkTZpNs/photo.jpg">
</div>
<div class="slides" id="slide2">
<img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-green-icon.png">
</div>
<div class="slides" id="slide3">
<img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-black-icon.png">
</div>
</div>
</div>
This approach should do it. In plain JavaScript using querySelector() and querySelectorAll. You just need the code. The CSS and HTML are just altered to make it work for the example.