We Keep Coding

Div not showing when onClick Function runs

I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo

Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}

Javascript click event in for loop not working?

function albumCoverDisplay() {
var i = 0;
for (i = 0; i < albumCover.length; i++) {
albumCover[i].addEventListener("click", function() {
for (var i = 0; i < albumCover.length; i++) {
albumInfo[i].style.display = "none";
}
albumInfo[i].style.display = "block";
});
}
}

Looks like you want to be able to hide other albumCover elements on clicking one of them.
There are a couple of mistakes
Your inner for-loop re-localize the scope of i, use different variable
i's value (assuming another variable is used in inner for-loop) will not remain same when the click will happen.
Make it
function albumCoverDisplay()
{
for (let i = 0; i < albumCover.length; i++) //use let instead of var
{
albumCover[i].addEventListener("click", function() {
for (var j = 0; j < albumCover.length; j++)
{
albumInfo[j].style.display = "none";
}
albumInfo[i].style.display = "block";
});
}
}

Toggle multiple css classes on div with javascript

I have a problem to toggle between 4 color classes.
I trying to change color everytime this function is used.
function changeBackground() {
var all = getSelected();
var blue = document.getElementsByClassName("blue");
for (var i = 0; i < all.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
var red = document.getElementsByClassName("red");
for (var i = 0; i < red.length; i++) {
all[i].classList.add("blue");
all[i].classList.remove("red");
}
var yellow = document.getElementsByClassName("yellow");
for (var i = 0; i < yellow.length; i++) {
all[i].classList.add("red");
all[i].classList.remove("yellow");
}
for (var i = 0; i < all.length; i++) {
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
getSelected returns document.getElementsByClassName("selected");
and make sure only divs who are selected do change background.
Html looks like this: <div id="box1" class="box center green size200"></div>
Works well untill it comes to blue->green and the classes won't be removed.
How do i solve this?

Please check this https://jsfiddle.net/maflorezp/1u3xjxaq/1/
You have some errors walking the elements and you need validate class before change
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var color = all[i].classList;
if(color.contains("blue")){
all[i].classList.add("green");
all[i].classList.remove("blue");
} else if(color.contains("red")){
all[i].classList.add("blue");
all[i].classList.remove("red");
} else if(color.contains("yellow")){
all[i].classList.add("red");
all[i].classList.remove("yellow");
} else if(color.contains("green")){
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
}

I see a few issues with your code:
1- You loop on all of the boxes for each color. You should replace
for (var i = 0; i < blue.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
by
for (var i = 0; i < blue.length; i++) {
blue[i].classList.add("green");
blue[i].classList.remove("blue");
}
2- You should select all your divs before making any modification, to make sure you only select the one that were that color before starting the function.
var blue = document.getElementsByClassName("blue");
var red = document.getElementsByClassName("red");
var yellow = document.getElementsByClassName("yellow");
var green = document.getElementsByClassName("green");
3- You currently use getSelected to get all the selected divs but then you run the code on every element of the document.
I think instead of using 4 loops, you should only create one and check the class for each elemnts of all, it would resolve a lot of you issues. Something like:
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var colorBlue = all[i].classList.contains("blue")
var colorRed = all[i].classList.contains("red")
var colorGreen = all[i].classList.contains("greed")
var colorYellow = all[i].classList.contains("yellow")
if(colorBlue){
all[i].classList.add("green");
all[i].classList.remove("blue");
}
//check other colors here the same way
}
}

Number of checked checkboxes

How to rewrite this code from jQuery to vanilla JavaScript? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.
$(function () {
var countChecked = function () {
var n = $("input:checked").length;
$(".output").text(n);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
});
What should I do next?
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
function countIt() {
for (var i = 0; i < box.length; i++) {
if ( box[i].checked ) {
great++
par.innerHTML = great;
return
}
}
}
}

You need to reset the great variable each time you count (for example by moving it inside the countIt function).
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
function countIt() {
var great = 0;
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
great++;
}
}
par.innerHTML = great;
}
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
}
You can also move the countIt function definition out of the loop and the same with innerHTML setting.

How to ignore an event in javascript?

So, I'm new to javascript.
My code is the following, it is based on a xaml file with a canvas and a couple of borders in it:
var defaultPage = null;
var aantalKliks;
var correcteBorders;
var incorrecteBorders;
var geenAntwBorders;
function onLoaded() {
defaultPage = document.getElementById('DefaultPage');
alert('In onloaded van Default.xaml.');
aantalKliks = 0;
aantalBorderKliks = 0;
correcteBorders = new Array();
for (var i = 0; i < 3; i++) {
correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
}
incorrecteBorders = new Array();
for (var i = 0; i < 3; i++) {
incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
}
geenAntwBorders = new Array();
for (var i = 0; i < 3; i++) {
geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
}
}
function OnCanvasClicked() {
if (aantalKliks == 2) {
aantalKliks = 0;
}
if (aantalKliks == 0) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Visible';
}
} else if (aantalKliks == 1) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
aantalKliks++;
}
function borderClicked(sender) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
sender['Visibility'] = 'Visible';
}
The function OnCanvasClicked is triggered when I click anywhere in the canvas and makes all borders disappear/reappear. The function borderClicked is triggered when I click a specific border. The function borderClicked does trigger when I click a specific border, however the OnCanvasClicked function also gets executed right after, which causes an unwanted result.I think I need some way to ignore the OnCanvasClicked function if I click on a border, I did google this but to be honest I didn't really understand what they meant in most of the solutions, so I was hoping someone could explain it to me in a simple way what I need to do (and what I'm doing).

You need to set event.stopPropagation() when borderClicked function is fire

Try this which will prevent Javascript to further execution
event.preventDefault()

#Harshit is correct
You need to set event.stopPropagation() when borderClicked function is fire
I just wanted to add this link/sample which I found very usefull to understand bubbling
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/ie9_event_phases.htm