Develop Reference

Cycle through divs up and down with Jquery

I need to cycle up and down through two sets of divs simultaneously. This code works well for cycling up the list (button1) but when I tried to create a down button (button2) it messes up the div order and doesn't cycle correctly. How can I alter this code to make it successfully cycle up and down through the list in the correct order?
$(document).ready(function() {
var divs = $('div[id^="num-"]').hide(),
i = 0;
function cycleone() {
divs.hide().eq(i).show();
i = ++i % divs.length;
};
cycleone()
$('#button1').click(function() {
cycleone()
})
});
$(document).ready(function() {
var divsv = $('div[id^="numv-"]').hide(),
iv = 0;
function cycletwo() {
divsv.hide().eq(iv).show();
iv = ++iv % divsv.length;
};
cycletwo()
$('#button1').click(function() {
cycletwo()
})
});
$(document).ready(function() {
var divs = $('div[id^="num-"]').hide(),
i = 0;
function cycleonedown() {
divs.hide().eq(i).show();
i = --i % divs.length;
};
cycleonedown()
$('#button2').click(function() {
cycleonedown()
})
});
$(document).ready(function() {
var divsv = $('div[id^="numv-"]').hide(),
iv = 0;
function cycletwodown() {
divsv.hide().eq(iv).show();
iv = --iv % divsv.length;
};
cycletwodown()
$('#button2').click(function() {
cycletwodown()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num-1">1</div>
<div id="num-2">2</div>
<div id="num-3">3</div>
<div id="num-4">4</div>
<div id="num-5">5</div>
<div id="num-6">6</div>
<div id="num-7">7</div>
<div id="numv-1">A</div>
<div id="numv-2">B</div>
<div id="numv-3">C</div>
<div id="numv-4">D</div>
<div id="numv-5">E</div>
<div id="numv-6">F</div>
<div id="numv-7">G</div>
<button id="button1">Up</button>
<button id="button2">Down</button>

As i can see you are using jquery, try the snippet below
$(document).ready(function(){
var lettersArray=[];
var step=1;
var lastStep=parseInt($(document).find('.num').length);
if($(document).find('.numv').length){
$(document).find('.numv').each(function(){
var letter=$(this).html();
lettersArray.push(letter);
});
}
showCycle=function(step){
var stepLetter=lettersArray[step-1];
$('#number').html(step);
$('#letter').html(stepLetter);
}
$(document).on('click','#button1',function(){
step=step+1;
step=step > lastStep ? 1 : step;
showCycle(step);
});
$(document).on('click','#button2',function(){
step=step-1;
step=step < 1 ? lastStep : step;
showCycle(step);
});
});
.num, .numv{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="num-1"class="num">1</div>
<div id="num-2"class="num">2</div>
<div id="num-3"class="num">3</div>
<div id="num-4"class="num">4</div>
<div id="num-5"class="num">5</div>
<div id="num-6"class="num">6</div>
<div id="num-7"class="num">7</div>
<div id="numv-1"class="numv">A</div>
<div id="numv-2"class="numv">B</div>
<div id="numv-3"class="numv">C</div>
<div id="numv-4"class="numv">D</div>
<div id="numv-5"class="numv">E</div>
<div id="numv-6"class="numv">F</div>
<div id="numv-7"class="numv">G</div>
<div id="number">1</div>
<div id="letter">A</div>
<button id="button1">Up</button>
<button id="button2">Down</button>

Trouble getting event listener to work properly in javascript

So I am a javascript noob. I'm doing an assignment for a webdesign class and we are practicing event listeners. So I had to assign variables to 3 separate divs, place them in an array, create a function to make them display or be hidden, and use a button/click event listener to call the function to call or hide them respectively. this is my code:
var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");
var boxes = [greenBox, redBox, blueBox];
function showBoxes(boxes) {
for (i = 0; i < boxes.length; i++) {
boxes[i].style.display = "block";
}
}
function hideBoxes(boxes) {
for (i = 0; i < boxes.length; i++) {
boxes[i].style.display = "none";
}
}
showALL.addEventListener("click", function() {
showBoxes(boxes);
})
// The "Hide All" button invokes the hideBoxes method
hideALL.addEventListener("click", function() {
hideBoxes(boxes);
})
<form action="#">
<input type="button" id="showAll" value="Show All"><br />
<input type="button" id="hideAll" value="Hide All"><br />
</form>
<div class="box" id="greenBox" style="display:none"></div>
<div class="box" id="redBox" style="display:none"></div>
<div class="box" id="blueBox" style="display:none"></div>
So what the heck am I doing wrong? I've checked multiple times for typos, etc. but everything looks ok to me? It's still not working though.

document.getElementById is case-sensitive.
You have id="showAll" when you are searching for document.getElementById("showALL");.
Pick a consistent case and it should work.
var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");
var boxes = [greenBox, redBox, blueBox];
function showBoxes(boxes) {
for (i = 0; i < boxes.length; i++) {
boxes[i].style.display = "block";
}
}
function hideBoxes(boxes) {
for (i = 0; i < boxes.length; i++) {
boxes[i].style.display = "none";
}
}
showALL.addEventListener("click", function() {
showBoxes(boxes);
})
// The "Hide All" button invokes the hideBoxes method
hideALL.addEventListener("click", function() {
hideBoxes(boxes);
})
.box {width: 200px; height: 36px;}
#redBox {background-color: #F00;}
#greenBox {background-color: #0F0;}
#blueBox {background-color: #00F;}
<form action="#">
<input type="button" id="showAll" value="Show All"><br />
<input type="button" id="hideAll" value="Hide All"><br />
</form>
<div class="box" id="greenBox" style="display:none"></div>
<div class="box" id="redBox" style="display:none"></div>
<div class="box" id="blueBox" style="display:none"></div>

Aside from your initial typo of the div ids document.getElementById("showALL"); should be document.getElementById("showAll");, the divs would also not appear without a size or contents. Something like this should do:
var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");
var boxes = [greenBox, redBox, blueBox];
function showBoxes(boxes) {
for (i = 0; i < boxes.length; i++) {
boxes[i].style.display = "block";
}
}
function hideBoxes(boxes) {
for (i = 0; i < boxes.length; i++) {
boxes[i].style.display = "none";
}
}
showALL.addEventListener("click", function() {
showBoxes(boxes);
});
hideALL.addEventListener("click", function() {
hideBoxes(boxes);
});
<form action="#">
<input type="button" id="showAll" value="Show All"><br />
<input type="button" id="hideAll" value="Hide All"><br />
</form>
<div class="box" id="greenBox" style="display:none;background-color:green;height:20px;width:20px"></div>
<div class="box" id="redBox" style="display:none;background-color:red;height:20px;width:20px"></div>
<div class="box" id="blueBox" style="display:none;background-color:blue;height:20px;width:20px"></div>

The Problem is here in your Selectors
var showALL = document.getElementById("showALL");
var hideALL = document.getElementById("hideALL");
your Element is named "showAll" and you are using "showALL". Notice the capital "L".

As others have said your casing needs to be consistent. One thing that may help you out when debugging this sort of thing is to open up developer tools in your browser(f12 in chrome) and placing breakpoints in the javascript so you can step through and see what the values of your variables are.

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/

How do I insert the elements of a java script function inside a div?

This is my code
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var year_table = document.createElement("TABLE");
year_table.setAttribute("id", "head_skill_table");
document.body.appendChild(year_table);
var year_tr = document.createElement("TR");
year_tr.setAttribute("id", "year_tr");
document.getElementById("head_skill_table").appendChild(year_tr);
for(i = 2006; i <= 2016; i++) {
var year_th = document.createElement("TH");
var year_cell = document.createTextNode(i);
year_th.appendChild(year_cell);
document.getElementById("year_tr").appendChild(year_th);
year_th.style.width = "25vw";
year_th.style.border = "2px dotted #a1a1a1";
year_th.style.borderRadius = "100%";
year_th.style.padding = "1.5% 0.5%";
for(j = 0; j < 4; j++) {
var year_hr = document.createElement("TH");
year_hr.innerHTML = '<hr style="border-top: 2px dotted #a1a1a1;">';
document.getElementById("year_tr").appendChild(year_hr);
year_hr.style.width = "25vw";
}
}
var year_th = document.createElement("TH");
var year_cell = document.createTextNode(2017);
year_th.appendChild(year_cell);
document.getElementById("year_tr").appendChild(year_th);
year_th.style.width = "25vw";
year_th.style.border = "2px dotted #a1a1a1";
year_th.style.borderRadius = "100%";
year_th.style.padding = "1.5% 0.5%";
}
</script>
</head>
<body >
<div id="one">
<!--Some Content-->
</div>
<div id="two">
<!--Some Content-->
</div>
<div id="three">
<!--Some Content-->
</div>
<div id="myDiv" style="some css style">
<!--Place my table created with javascript function here, so it will inherite the css style-->
</div>
<div id="four">
<!--Some Content-->
</div>
<div id="five">
<!--Some Content-->
</div>
<div id="six">
<!--Some Content-->
</div>
</body>
</html>
Now I want to add my code into the div with id = "myDiv" so that the table that gets created by myFunction() will inherit all the CSS style of myDiv()
I tried innerHTML but that didn't make the table inherit the style of myDiv.

You just need to drop the year_table into myDiv as done below. I've added some styling for myDiv to make the border blue.
<script>
function myFunction() {
var year_table = document.createElement("TABLE");
year_table.setAttribute("id", "head_skill_table");
var myDiv = document.getElementById("myDiv");
myDiv.appendChild(year_table);
// document.body.appendChild(year_table);
var year_tr = document.createElement("TR");
year_tr.setAttribute("id", "year_tr");
document.getElementById("head_skill_table").appendChild(year_tr);
for(i = 2006; i <= 2016; i++) {
var year_th = document.createElement("TH");
var year_cell = document.createTextNode(i);
year_th.appendChild(year_cell);
document.getElementById("year_tr").appendChild(year_th);
year_th.style.width = "25vw";
year_th.style.border = "2px dotted #a1a1a1";
year_th.style.borderRadius = "100%";
year_th.style.padding = "1.5% 0.5%";
for(j = 0; j < 4; j++) {
var year_hr = document.createElement("TH");
year_hr.innerHTML = '<hr style="border-top: 2px dotted #a1a1a1;">';
document.getElementById("year_tr").appendChild(year_hr);
year_hr.style.width = "25vw";
}
}
var year_th = document.createElement("TH");
var year_cell = document.createTextNode(2017);
year_th.appendChild(year_cell);
document.getElementById("year_tr").appendChild(year_th);
year_th.style.width = "25vw";
year_th.style.border = "2px dotted #a1a1a1";
year_th.style.borderRadius = "100%";
year_th.style.padding = "1.5% 0.5%";
}
</script>
<style>
#myDiv table th {
border-color:blue !important;
}
</style>
<div id="one">
<!--Some Content-->
</div>
<div id="two">
<!--Some Content-->
</div>
<div id="three">
<!--Some Content-->
</div>
<div id="myDiv" style="some css style">
<!--Place my table created with javascript function here, so it will inherite the css style-->
</div>
<div id="four">
<!--Some Content-->
</div>
<div id="five">
<!--Some Content-->
</div>
<div id="six">
<!--Some Content-->
</div>
<script>
myFunction();
</script>

Use CSS for styling. That's what it's designed for.
div #head_skill_table {
/* my style rules */
}
And change the javascript function to accept the ID of a div to place the table inside, so it stays flexible.
function myFunction(tableID) {
// ...
}
Then you can separate out your display from your structure.

document.getElementById('myDiv').appendChild(year_table);
if I understand correctly you just need this line after your table is generated. Also dont forget to call your function sometime or in window.onload like
window.onload = myFunction;

You have to use the id head_skill_table, to make the style to effect your code
#head_skill_table {
background:red;
}

JavaScript Toggle Display

I'm trying to use vanilla JavaScript to toggle display: none and display: block on elements with the same class. It mostly works, but for some reason you need to click the button twice for it to work and it's eating away at me. The code and a link to CodePen is below.
The HTML:
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<button onclick="toggle('a')">Toggle A</button>
<button onclick="toggle('b')">Toggle B</button>
<button onclick="toggle('c')">Toggle C</button>
<button onclick="toggle('d')">Toggle D</button>
The JS:
function toggle(div) {
var divs = document.getElementsByClassName(div);
for(var i = 0; i < divs.length; i++) {
if(divs[i].style.display === "block") {
divs[i].style.display="none";
}
else {
divs[i].style.display="block";
}
}
}
The Demo:
CodePen

add the style attribute to the divs..
<div class="a" style="display:block">a</div>
<div class="b" style="display:block">b</div>
<div class="c" style="display:block">c</div>
<div class="d" style="display:block">d</div>

I would do this instead:
<div class='a'>a</div>
<div class='b'>b</div>
<div class='c'>c</div>
<div class='d'>d</div>
<input type='button' id='aT' value='Toggle A' />
<input type='button' id='bT' value='Toggle B' />
<input type='button' id='cT' value='Toggle C' />
<input type='button' id='dT' value='Toggle D' />
Put external JavaScript tag in <head> for caching:
var pre = onload;
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function C(n){
if(doc.getElementsByClassName){
return doc.getElementsByClassName(n);
}
var t = doc.getElementsByTagName('*'), a = [];
for(var i=0,l=t.length; i<l; i++){
if(t[i].className.match(new RegExp('\\b'+n+'\\b'))){
a.push(t[i]);
}
}
return a;
}
function getStyleProp(elem, prop){
return getComputedStyle(elem).getPropertyValue(prop) || elem.currentStyle[prop];
}
function toggle(elem){
elem.style.display = getStyleProp(elem, 'display').match(/^block$/i) ? 'none' : 'block';
return elem;
}
var btns = ['a', 'b', 'c', 'd'];
for(var i=0,l=btns.length; i<l; i++){
(function(i){
var b = btns[i], c = C(b);
E(b+'T').onclick = function(){
for(var n=0,q=c.length; n<q; n++){
toggle(c[n]);
}
}
})(i);
}
}

Add display: block; to the CSS definition for the DIV.

your var divs = document.getElementsByClassName(div); will only return one element because there is only one element with that class.
<div id="blocks'>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
function toggle(div) {
var divs = document.getElementById('blocks');
var ele = blocks.getElementsByTagName("div');
var sty = "";
for(var i = 0; i < ele.length; i++) {
sty = ( ele[i].className.indexOf( div ) ) ? 'block' : 'none';
ele[i].style.display = sty;
}
}
}