Develop Reference

Remove / Hide multiple divs on button click

I was about to drop a question, but I actually noticed my error and I solved it. So instead of deleting this post I'll post it to help some people out there.[The error was I wrote getElemenstByClassName(), instead of getElementsByClassName() which is funny and depressing at the same time]
Also, show / bring back divs button is also there.
Here is the code:
var y = document.getElementsByClassName('ex')
var i;
function removeSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'none';
}
}
function hideSamples() {;
for (i = 0; i < y.length; i++) {
y[i].style.opacity = '0%';
}
}
function removeSamples2() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'block';
}
}
function hideSamples2() {;
for (i = 0; i < y.length; i++) {
y[i].style.opacity = '100%';
}
}
body {
background-color: rgb(25, 25, 25);
}
img,
.ex1,
.ex2,
.ex3,
.ex4,
.ex5 {
height: 150px;
width: 150px;
}
p {
color: rgb(255,0,0);
}
<button type="button" onclick="removeSamples()">Remove Samples</button>
<button type="button" onclick="hideSamples()">Hide Samples</button>
<button type="button" onclick="removeSamples2()">Bring back Samples</button>
<button type="button" onclick="hideSamples2()">Show Samples</button>
<div class="ex">
<img class="ex1" src="https://64.media.tumblr.com/af3438bac361d21ee1013338e4489b6f/b6f413ba8130992f-76/s1280x1920/0c9dab7eacac2a07eba7f340690514654d3e7aae.jpg">
</div>
<div class="ex">
<img class="ex2" src="https://i.pinimg.com/736x/a7/8d/e7/a78de7602e65161098cf1713da457e7a.jpg">
</div>
<div class="ex">
<img class="ex3" src="https://i.pinimg.com/originals/ec/83/3d/ec833d04025d2ca263df3b04bbc8723c.jpg">
</div>
<div class="ex">
<img class="ex4" src="https://i.pinimg.com/originals/cc/b7/e9/ccb7e9b09ec4a48478b2ff9561010000.png">
</div>
<div class="ex">
<img class="ex5" src="https://i.pinimg.com/originals/5b/cd/01/5bcd015992afa05979c8b9b448fb2939.jpg">
</div>
<p>Text</p>

Hi opacity get value between 0 and 1
but you used 0% and 100%!!!
Fix your code like this:
let y = document.querySelectorAll('.ex')
let i;
function removeSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'none';
y[i].style.opacity = 0;
}
}
function showSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'block';
y[i].style.opacity = 1;
}
}

Here, I'll do a brief explanation about the code above and a brief explanation about for in JavaScript.
First you make a multiple containers with the same class
<div class="ex">
</div>
<div class="ex">
</div>
<div class="ex">
</div>
<div class="ex">
</div>
Then, put something in that container to see what is happening
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now add some CSS
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now let's insert some basic Js (JavaScript) code We will declare x variable to be document.getElementsByClassName('ex') it'll help us to write x.style.display instead of document.getElementsByClassName('ex').style.display because we will be calling it multiple times. We will leave i variable undefined for now.
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Let's make a button in the HTML then make empty function in JavaScript called removeEx()
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
function removeEx() {
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">
Remove Lines
</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now, let's focus here on JavaScript.In the empty function we made, put empty for statement
function removeEx() {
for()
}
Now let's tell the for statement that i variable is equals to 0
function removeEx() {
for(i = 0;)
}
Then, we will tell for statement to stop looping once it reaches the last class element in the HTML by adding < smaller than symbol so it can know where to stop. Also, we have to tell it to stop corresponding to the length of the classes which is 4 classes we have in our HTML by attaching .length method to the variable x.instead of writing:
function removeEx() {
for(i = 0; i < document.getElementsByClassName('ex').length;)
}
We will write:
function removeEx() {
for(i = 0; i < x.length;) //Remember, var x = document.getElementsByClassName('ex');
}
We will make the i variable to keep increasing by 1 until it reaches 4 (the number of our classes) then it'll stop by adding ++ operator to the i variable.
So we will write this
function removeEx() {
for(i = 0; i < x.length; i++)
}
Our for statement is now good to go.Let's open a curly brackets
function removeEx() {
for(i = 0; i < x.length; i++) {
}
}
We will evoke an event to make all divs with the class ex to get removed. So we will let i variable attach to x variable to make the spark of the event by typing x[i], then we can put the event we want. For our case, the event is we want to change the display statement to none.We will write this
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none'; //You can put any CSS statement after x[i].style for example x[i].style.color
}
}
Now let's test our code
var x = document.getElementsByClassName('ex');
var i;
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">
Remove Lines
</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Finally, we will add 3 more buttons. One to get back our lines, one to make our lines semi-transparent, and one to make our lines not-transparent.The first button:
<button type="button" onclick="removeEx()">Remove Lines</button>
The second button:
<button type="button" onclick="removeEx2()">Get back Lines</button>
The third button:
<button type="button" onclick="removeEx3()">50% Lines</button>
The forth button:
<button type="button" onclick="removeEx4()">Normal Lines</button>
The final result:
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
}
function removeEx2() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'block';
}
}
function removeEx3() {
for (i = 0; i < x.length; i++) {
x[i].style.opacity = '50%';
}
}
function removeEx4() {
for (i = 0; i < x.length; i++) {
x[i].style.opacity = '100%';
}
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">Remove Lines</button>
<button type="button" onclick="removeEx2()">Get back Lines</button>
<button type="button" onclick="removeEx3()">50% Lines</button>
<button type="button" onclick="removeEx4()">Normal Lines</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>

In my React.js project i Used some code in the JS file to add slider on my web page TypeError: Cannot read property 'style' of undefined

I am facing this actually I do not understand the actual error is where and which terms I am missing.
I have tried to fix it out, in the console at chrome browser, it locates an error at the started marked line I have given in my snippet.
slide[current].style.display = 'block'; this is actual line I found in the browser getting error
export default function Slider() {
let slide = document.querySelectorAll('.slide');
var current = 0;
function cls(){
for(let i = 0; i < slide.length; i++){
slide[i].style.display = 'none';
}
}
function next(){
cls();
if(current === slide.length-1) current = -1;
current++;
**slide[current].style.display = 'block';**
slide[current].style.opacity = 0.4;
var x = 0.4;
var intX = setInterval(function(){
x+=0.1;
slide[current].style.opacity = x;
if(x >= 1) {
clearInterval(intX);
x = 0.4;
}
}, 100);
}
function prev(){
cls();
if(current === 0) current = slide.length;
current--;
slide[current].style.display = 'block';
slide[current].style.opacity = 0.4;
var x = 0.4;
var intX = setInterval(function(){
x+=0.1;
slide[current].style.opacity = x;
if(x >= 1) {
clearInterval(intX);
x = 0.4;
}
}, 100);
}
function start(){
cls();
slide[current].style.display = 'block';
}
start();
return (
<div>
<div class="container">
<div class="arrow l" onclick="prev()">
<img src={s1.jpg} alt="l" />
</div>
<div class="slide slide-1">
<div class="caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
<div class="slide slide-2">
<div class="caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="slide slide-3">
<div class="caption">
<h3>Bahar Dar</h3>
<p>Thank you, Bahar Dar!</p>
</div>
</div>
<div class="arrow r" onclick="next()">
<img src={s2.jpg} alt="r" />
</div>
</div>
</div>
)
}

Cycle through multiple divs with prev/next buttons

Right now it cycles through 1 div per click - would it be possible to make this cycle through 4 divs with each click? Completely stumped on it...
HTML:
<div class="outside-buttons">
<div class="prev">Previous</div>
<div class="next">Next</div>
</div>
<div class="parent">
<div class="childclass">some content</div>
<div class="childclass">some content 2</div>
<div class="childclass">some content 3</div>
<div class="childclass">some content 4</div>
<div class="childclass">some content 5</div>
<div class="childclass">some content 6</div>
<div class="childclass">some content 7</div>
<div class="childclass">some content 8</div>
<div class="childclass">some content 9</div>
</div>
jQuery:
var $zDiv = $('.childclass'),
$prNx = $('.prev, .next'),
$btns = $('.zanc > a'),
n = $zDiv.length,
c = 0; // current
d = 4; //number of items
function toggView(){
// content:
$zDiv.hide().eq(c).show();
// buttons:
$prNx.show();
if(c<=0){
$('.prev').hide();
}
if(c>=n-1){
$('.next').hide();
}
}
toggView();
$prNx.click(function(){
c = $(this).hasClass('next') ? ++c : --c;
toggView();
});
$btns.click(function( e ){
c = $(this).index();
toggView();
});
fiddle: https://jsfiddle.net/g1r0ws6w/2/

To always show 4 divs next to each other you need to raise your stepsize within your click() method while displaying more than one item at the same time. I used a for-loop for this purpose.
Concluding You need to adjust the condition to display/hide the next-Button accordingly.
var $zDiv = $('.childclass'),
$prNx = $('.prev, .next'),
$btns = $('.zanc > a'),
n = $zDiv.length,
c = 0; // current
d = 4; //number of items
function toggView(){
// content:
$zDiv.hide();
for(i=0;i<d && i+c<n;i++){
$zDiv.eq(i+c).show();
}
// buttons:
$prNx.show();
if(c<=0){
$('.prev').hide();
}
if(c+3>=n-1){
$('.next').hide();
}
}
toggView();
$prNx.click(function(){
c = $(this).hasClass('next') ? c += 4 : c -= 4;
toggView();
});
$btns.click(function( e ){
c = $(this).index();
toggView();
});
This is a corresponding fiddle.

Here's a fiddle. All you needed was where you have ++c/--c you need to add/subtract your d value.
$prNx.click(function(){
c = $(this).hasClass('next') ? c += d : c -= d;
toggView();
});

You can do this
$prNx.click(function(){
c = $(this).hasClass('next') ? c+4 : c-4;
toggView();
});

I added paging for display as default number (You can set whatever number) . c and d will be your current start and end index of current offset .
var $zDiv = $('.childclass'),
$prNx = $('.prev, .next'),
$btns = $('.zanc > a'),
n = $zDiv.length,
paging = 4;
c = 0; // current
d = paging; //number of items
function toggView(){
// content:
$zDiv.hide();
for(var i = c; i < d; i++) {
$zDiv.eq(i).show();
}
// buttons:
$prNx.show();
if(c == 0){
$('.prev').hide();
}
if(c+paging >= n){
$('.next').hide();
}
}
toggView();
$prNx.click(function(){
if($(this).hasClass('next')) {
c += paging;
d += paging;
} else {
c -= paging;
d -= paging;
}
toggView();
});
.childclass {
height: 100px;
display: inline-block;
background: #e3e3e3;
margin: 10px;
}
.current { display: block; }
.childclass { clear: none !important;
display: inline-block;
white-space: nowrap;
width: 25% !Important;
float: none;
}
.parent {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap !Important;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outside-buttons">
<div class="prev">
Previous</div>
<div class="next">
Next</div>
</div>
<div class="parent">
<div class="childclass">
some content
</div>
<div class="childclass">
some content 2
</div>
<div class="childclass">
some content 3
</div>
<div class="childclass">
some content 4
</div>
<div class="childclass">
some content 5
</div>
<div class="childclass">
some content 6
</div>
<div class="childclass">
some content 7
</div>
<div class="childclass">
some content 8
</div>
<div class="childclass">
some content 9
</div>
<div class="childclass">
some content 10
</div>
<div class="childclass">
some content 11
</div>
</div>

Find duplicates by one of multiple classes

I have divs with multiple classes (brand and color) like:
<div id="pad">
<div class="bmw white"> </div>
<div class="porsche yellow"> </div>
<div class="porsche red"> </div>
<div class="bmw white"> </div>
<div class="bmw blue"> </div>
<div class="bmw white"> </div>
</div>
<div id="same"></div>
And when I need to know how many duplicate brands I have in #pad I use this code:
function sameCars() {
var elems = $("#pad div").length;
var brands = ['bmw', 'porsche'];
for (var i=0; i<brands.length; i++) {
var k = 0;
for (var j=0; j<elems; j++) {
var mainDiv = document.getElementById('pad'),
childDiv = mainDiv.getElementsByTagName('div')[j];
if(childDiv.className.split(' ')[0] == brands[i]) {
k = k+1;
}
}
addiv = document.getElementById("same");
addiv.innerHTML += brands[i] + ": " + k;
}
}
Now I want to make changes in my code:
1) to find duplicates for all classes (there could be more classes, first one is brand, the second one is color, etc) like bmw: 4, porsche: 2, white: 3, black: 3, sedan: 2, coupe: 3
2) not to use list of brands, colors, etc. I don't want to make a long list of all possible colors or car brands. Just get colors from classname
3) Make my code shorter and more elegant

You just have to dynamically gather all classes fists:
$(document).ready(function () {
var duplicates = {};
var $pad = $('#pad');
$('#pad > div').each(function () {
var classes = $(this)[0].classList;
for (var i = 0; i < classes.length; i++) {
if (typeof duplicates[classes[i]] === 'undefined') {
duplicates[classes[i]] = 1;
} else {
duplicates[classes[i]]++;
}
}
});
for (var j in duplicates) {
$pad.append('<div>'+j+':'+duplicates[j]+'</div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pad">
<div class="bmw white"> </div>
<div class="porsche yellow"> </div>
<div class="porsche red"> </div>
<div class="bmw white"> </div>
<div class="bmw blue"> </div>
<div class="bmw white"> </div>
</div>
<div id="same"></div>

You can use jquery to get classes dynamically and apply logic to get unique counts like this.
sameCars();
function sameCars() {
var brands = [];
var colors = [];
$("#pad div").each(function(){
brands.push($(this).attr("class").split(' ')[0])
colors.push($(this).attr("class").split(' ')[1])
});
//console.log(brands)
//console.log(colors)
var cars_count = {};
$.each(brands, function( index, value ) {
cars_count[value] = cars_count[value] + 1 || 1;
});
console.log("Unique cars count :")
console.log(cars_count);
var count_color = {};
$.each(colors, function( index, value ) {
count_color[value] = count_color[value] + 1 || 1;
});
console.log("Unique Colors count :")
console.log(count_color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pad">
<div class="bmw white"> </div>
<div class="porsche yellow"> </div>
<div class="porsche red"> </div>
<div class="bmw white"> </div>
<div class="bmw blue"> </div>
<div class="bmw white"> </div>
</div>
<div id="same"></div>

Here is a nice way of getting what you want. Note I do not manipulate the DOM, I'll leave that up to you.
function classIsDup(className, setOfClasses)
{
return (setOfClasses.indexOf(className) > -1);
}
function getDuplicates()
{
var setOfClasses = [];
var listOfDuplicates = [];
$('#pad').children('div').each(function( index ) {
if(classIsDup($(this).attr('class'), setOfClasses))
{
listOfDuplicates.push($(this).attr('class'));
}
else
{
setOfClasses.push($(this).attr('class'));
}
});
// just in case dups exist within the list of dups
$.uniqueSort(listOfDuplicates);
}
getDuplicates();

Javascript example (no jquery required)
var parentWrapper = document.getElementById('pad');
var displayWrapper = document.getElementById('same');
var classesList = getUniqueClassList(parentWrapper);
displayCounts(classesList);
function displayCounts(list) {
for (var className in list) {
var number = list[className];
displayWrapper.innerHTML += className + ' ' + number + '<br>';
}
}
function getUniqueClassList(wrapper) {
var list = {};
for (var elem of wrapper.getElementsByTagName('div')) {
for (var cssClass of elem.classList) {
if (!list[cssClass]) {
list[cssClass] = 1;
} else {
list[cssClass]++;
}
}
}
return list;
}
Fiddle https://fiddle.jshell.net/r1rk1xL3/5/

Increase and decrease value in Pure Javascript

I'm trying to develop a very simple carousel with Pure Javascript and CSS. I'm having trouble with the "next" and "previous" button, since they should communicate the with each other, setting the current position of the carousel.
Here is my current code (or JsFiddle: https://jsfiddle.net/kbumjLw2/1/):
// Slider
var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;
// Previous button
document.getElementById("btn-prev").onclick = function() {
// Making sure this functions will not run if it's the 0px of the slider
if (parseInt(listRecommendations.style.left) != 0) {
var currentPosition = parseInt(listRecommendations.style.left) + 100;
listRecommendations.style.left = currentPosition + 'px';
console.log(currentPosition);
};
}
// Next button
var num = 100;
var maxValue = 1000 + 120;
console.log(maxValue);
document.getElementById("btn-next").onclick = function() {
if (num < maxValue) {
num += 100;
listRecommendations.style.left = '-' + num + 'px';
console.log(num);
};
}
#list-recomendations{
position: absolute;
}
.wrap-items .item{
float: left;
}
<div class="recommendation">
<div id="slider">
<div id="list-recommendations" class="wrap-items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<!-- Slider controls -->
<button id="btn-prev" class="btn-slider prev">Previous</button>
<button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>
As you can see on the console, the next button increases "100" at each click, and the previous button decreases "100" at each click. The previous button seems to be working fine, but the next button don't get the updated value, it always increase using the latest value it used.
Expected result:
Next button clicked: 100 > 200 > 300...
Prev button clicked: 200 > 100 > 0...
Next button clicked: 100 > 200 > 300...
Current result:
Next button clicked: 100 > 200 > 300...
Prev button clicked: 200 > 100 > 0...
Next button clicked: 400 > 500 > 600...
Any idea on what may be causing this issue?

check this updated fiddle
// Previous button
document.getElementById("btn-prev").onclick = function() {
// Making sure this functions will not run if it's the 0px of the slider
var currentPosition = parseInt(listRecommendations.style.left) - 100;
listRecommendations.style.left = currentPosition + 'px';
console.log(currentPosition);
}
// Next button
var num = 100;
var maxValue = 1000 + 120;
console.log(maxValue);
document.getElementById("btn-next").onclick = function() {
if (num < maxValue) {
var currentPosition = parseInt(listRecommendations.style.left) + 100;
num = currentPosition;
listRecommendations.style.left = num + 'px';
console.log(num);
};
}
you basically need to take the left value each time and do plus (+ next) minus (- prev) on it.

There is no use of num as you can play with the current position of the element.
Also note, - will concatenate the - symbol the the value, it will not subtract the value.
Ty this:
var maxValue = 1000 + 120;
var listRecommendations = document.getElementById('list-recommendations');
listRecommendations.style.left = 0;
document.getElementById("btn-prev").onclick = function() {
var val = parseInt(listRecommendations.style.left);
if (val != 0) {
val -= 100;
listRecommendations.style.left = val + 'px';
console.log(val);
};
}
document.getElementById("btn-next").onclick = function() {
var val = parseInt(listRecommendations.style.left);
if (val < maxValue) {
val += 100;
listRecommendations.style.left = val + 'px';
console.log(val);
};
}
#list-recomendations {
position: absolute;
}
.wrap-items .item {
float: left;
}
<div class="recommendation">
<div id="slider">
<div id="list-recommendations" class="wrap-items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
</div>
<!-- Slider controls -->
<button id="btn-prev" class="btn-slider prev">Previous</button>
<button id="btn-next" class="btn-slider next" title="Ver mais sugestões">Next</button>
</div>
Fiddle here