Develop Reference

I can't add or remove a class

I am trying to remove a class and add a class within one function. But when I click on the button nothing is happening.
This is my code
function unlikeVerhaal(unlike) {
unlike.preventDefault;
document.querySelector('#unliked').classList.add('onzichtbaar');
document.querySelector('#liked').classList.remove('onzichtbaar');
}
document.querySelector('.likebutton').addEventListener('submit', unlikeVerhaal);
.onzichtbaar {
display: none;
}
<li>
<button type="submit" class="likebutton">
<img src="icons/lined.png" alt="lined heart" class="unliked" id="unliked">
<img src="icons/solid.png" alt="solid heart" id="liked" class="onzichtbaar">
</button> 777
</li>
What I am trying to get is that the class is added to the first image and removed by the second image.

You just need to use a combination of the three methods .contains(), .add() and .remove() from the element.classList property along with a simple if/else statement (or a ternary operator if you prefer that) as can be seen in the Code Snippet below:
var btn = document.querySelector('.likebutton');
function unlikeVerhaal() {
var ul = document.getElementById("unliked");
var l = document.getElementById("liked");
if (ul.classList.contains("onzichtbaar")) {
ul.classList.remove("onzichtbaar");
l.classList.add("onzichtbaar");
console.log("Inspect your elements to see the class switching!")
} else {
l.classList.remove("onzichtbaar");
ul.classList.add("onzichtbaar");
console.log("Inspect your elements to see the class switching!")
}
}
btn.addEventListener("click", unlikeVerhaal)
.onzichtbaar {background-color: green;}
<li>
<button type="button" class="likebutton">
<div class="unliked" id="unliked">A</div>
<div id="liked" class="onzichtbaar">B</div>
</button> 777
</li>
You can either inspect the elements to see the class switching between the two or you can just watch the green background styling which is applied to an element with the onzichtbaar class name switching between the two.

This will works as you expect:
function unlikeVerhaal(e) {
e.preventDefault;
document.getElementById('unliked').classList.add('onzichtbaar');
document.getElementById('liked').classList.remove('onzichtbaar');
}
document.getElementById('likebutton').addEventListener('click', unlikeVerhaal);
Just change submit to click and remove type from button
Fiddle
Update:
Updated fiddle

JQuery - Not Switching Classes

It is late so I hope that I am missing something simple.
I have a div that uses a font-awesome fa-plus symbol. If clicked I want it to change to fa-minus and vice versa.
There is an additional class, add-team||remove-team, which is what the click event runs on.
It will change from + to - but not back to + when clicked a second time.
I have also done it from - to + and it doesn't change back to -.
Here is my div:
<div class="col-1 fa fa-plus add-team"></div>
And here are my simple jQuery lines:
$(".add-team").click(function () {
$(this).addClass("fa-minus remove-team").removeClass("fa-plus add-team");
});
$(".remove-team").click(function () {
$(this).addClass("fa-plus add-team").removeClass("fa-minus remove-team");
});
Hope that I'm just missing something simple. Thanks.

The problem is that your event listeners are only set to listen to elements that currently have those classes. The listeners do not dynamically change when the element's classes change. So since the element starts with add-team only the add-team listener is going to work.
What you can do is use setup a delegate event listener, a listener that is setup on a parent element that does not change, eg document and run the listeners off of that.
$(document).on('click','.add-team',function(){
//...
});
$(document).on('click','.remove-team',function(){
//...
});
But you can also just use a single event listener and use jQuery's toggleClass() to toggle all the classes in one call
$(this).toggleClass("fa-plus fa-minus add-team remove-team");
Demo
$(".col-1").click(function () {
$(this).toggleClass("fa-plus fa-minus add-team remove-team");
});
.col-1 {
font-size:24px;
font-weight:bold;
}
.fa-plus:after {
content:'+';
}
.fa-minus:after {
content:'-';
}
.add-team {
color:green;
}
.remove-team {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-1 fa fa-plus add-team"></div>

Using Javascript and JQuery to alter CSS properties: JQuery cannot alter properties that Javascript has already altered?

Here's what I'm trying to achieve:
I have four buttons in a list and each button has a white background and a unique colour border. When one button is clicked its background becomes the same colour as its border. When a second button is clicked the first button returns to normal and the second buttons background gets filled with the second buttons border colour. Each button has the id "navX" where X is a number from 1 to 4.
I have been using a mix of jQuery and javascript to achieve this. I was trying to use jQuery on click to set all button backgrounds to white and trying to use javascript to fill in the clicked buttons background. This is because I know jQuery allows you to gather all elements with a common id string:
$('[id^=nav]').css({"background":"#FFFFFF", "color":"#000000"});
whilst with javascript I can pass the clicked id and a colour parameter to the function:
<a id="nav1" onclick="changeHeaderColour(this, '#f0e442')"> Button 1 </a>
function changeHeaderColour(navItem, newColor) {
document.getElementById(navItem.id).style.backgroundColor = newColor;
document.getElementById(navItem.id).style.color = newColor;
}
I have been playing around with mixtures of ways of combining these, varying which selectors to use, and tampering with the core CSS and I am stuck achieving one of two things:
When a button is clicked, it gets stuck permanently with a filled in background. Continuing to click buttons finishes with all buttons stuck filled in.
When a button is clicked, all buttons get stuck permantently with a white background.
I really have no idea how else to achieve this. I just can't seem to get the hang of finding the correct mix of CSS levels that don't override each other. I haven't used jQuery's addClass() method since each class needs a unique colour. If anyone has any advice at all that would be great - it seems like a simple task and I was determined to achieve it on my own but I have been going at this for hours now!
Thanks for any help!

There's no need for the mix of jQuery, vanilla JS and inline scripts.
$("a.button").on("click", function(ev) {
ev.preventDefault();
// "reset" the background color of all "buttons"
$("a.button").css("background-color", "");
// change the background color of the clicked button to the same color as its border
var button = $(this);
button.css("background-color", button.css("border-color"));
});
a.button {
background-color: #fff;
padding: 5px;
border-style: solid;
border-width: 1px;
}
#nav1 { border-color: #f00 }
#nav2 { border-color: #0f0 }
#nav3 { border-color: #00f }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="nav1" class="button">Button 1</a>
<a id="nav2" class="button">Button 2</a>
<a id="nav3" class="button">Button 3</a>

Add a class to the buttons, for example "colored-button", then where you put the color in the button, do this:
function changeHeaderColour(navItem, newColor) {
$(".colored-button").css({"background":"#FFFFFF", "color":"#000000"}); //Remove whatever colors may be setted in any of these buttons and apply the desired style to the clicked element.
document.getElementById(navItem.id).style.background = newColor;
document.getElementById(navItem.id).style.color = newColor;
}

Is this what you are looking for?
/* Detection of a click event for a button */
$(document).on("click", "button", function() {
resetButtons();
/* Retrieve the border color from clicked button */
var borderColor = $(this).css("border-color");
/* Assign border color to background */
$(this).css("background-color", borderColor);
});
/* Reset buttons to default */
function resetButtons() {
/* White background, black characters */
$("button").css({
"background": "white",
"color": "black"
});
/* Color set for buttons 1 - 4 */
$("#nav1").css("border", "medium solid red");
$("#nav2").css("border", "medium solid darkgreen");
$("#nav3").css("border", "medium solid darkgray");
$("#nav4").css("border", "medium solid orange");
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav1">Button 1</button>
<button id="nav2">Button 2</button>
<button id="nav3">Button 3</button>
<button id="nav4">Button 4</button>

How to change the body's background color with buttons using javascript?

I'm attempting to change the entire background color of the body to the color that the button is assigned to. I'm new to javascript but I looked over the internet and my notes and couldn't find a problem. I think I'm just missing something very simple orrrrr i could be wayyy off.
THE HTML
<nav>
<ul>
<li>
<button onclick="white()">
<p>White</p>
</button>
</li>
<li>
<button onclick="red()">
<p>Red</p>
</button>
</li>
<li>
<button onclick="yellow()">
<p>Yellow</p>
</button>
</li>
<li>
<button onclick="blue()">
<p>Blue</p>
</button>
</li>
</ul>
</nav>
THE JAVASCRIPT
function white() {
document.body.backgroundColor("white");
}
function red() {
document.body.backgroundColor("red");
}
function yellow() {
document.body.backgroundColor("yellow");
}
function blue() {
document.body.backgroundColor("blue");
}

backgroundColor is an attribute, not a function. And its a style attribute. Change your lines to this:
document.body.style.backgroundColor = "yellow"
Furthermore, the onClick attribute is kind of outdated. You can try to work with event handlers in JavaScript itself instead (more information).

document.body.style.backgroundColor = "white"; // or any other color
More info on the style property in MDN.

You have the right idea, you just need to make sure you select the body element of the window correctly:
document.querySelector('body').style.backgroundColor
So your functions would look like:
function white() {
document.querySelector('body').style.backgroundColor = "white";
}
....
Note:
Make sure that you put your JavaScript at the end of the webpage too, it you aren't already!

Hover over one span and change background color of that span plus another one by adding and removing a class

<span id="english">Yes</span>
<span id="spanish">Sí</span>
How can I hover over any of these and change background color to yellow on both. I can't use onmouseout() because the background color changes dynamically due to other scripts.
I'm aware that I can add a class skipping the use of jQuery -although it's a valid choice if all else fails- by using something like:
document.getElementById(id).className += " yellow";
and the css would be:
.yellow {
background-color: yellow
}
My previous solution that included onmouseout() was:
function chbg(color, id1, id2) {
document.getElementById(id1).style.backgroundColor = color;
document.getElementById(id2).style.backgroundColor = color;
}
and the HTML:
<span id="english" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Yes</span>
<span id="spanish" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Sí</span>

Use JQuery hover function instead.
Try this:
$(document).ready(function(){
$("span").hover(
function(){
$('span').css('background', 'yellow');
},
function(){
$('span').css('background', 'white');
});
});
JSFiddle Demo #1 (With Class)
JSFiddle Demo #2 (Without Class)
UPDATE #1
Use toggleClass() function instead.
$(document).ready(function(){
$("span").hover(function(){
$('span').toggleClass('highlight');
});
});
JSFiddle Demo
UPDATE #2
Assign a class to all the span that needs to be highlighted. For example: class="highlight". Using toggleClass() to toggle a class from CSS will add another class now. This way only span with .highlight change color.
JSFiddle Demo

This can be done with only CSS, by adjusting your HTML a bit:
<span id="bghover">
<span>Yes</span>
<span>Sí</span>
</span>
And for the CSS:
#bghover span
{
background-color: white;
}
#bghover:hover span
{
background-color: yellow;
}
So you wrap the two spans into a span or div with id bghover, which is only used as a trigger for CSS :hover. If there's no hover, all spans within #bghover are white, if there is a hover (similar to onmouseover), all spans within #bghover are white.