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

Css selector : how to select elements with certain class name

I have an idea to add a dynamic css style by changing my label and make my input elements show differently when item.areaNo changes. I successfully gave my label element class='1', but css class did not understand my selector.I really need to know how to set the correct one.
<ol class="cabin fuselage">
<li class="row row--1">
<ol class="seats" type="A">
<li class="seat"><input type="checkbox" id="01-01" />
<label for="01-01">01-01</label></li>
<li class="seat"><input type="checkbox" id="02-01" /> <label
for="02-01">02-01</label></li>
this is my jsp,
.seat label.1{background: #50bdc9;}
and my css,
both reference to https://codepen.io/siiron/pen/MYXZWg BY Ronny Siikaluoma
$.getJSON("gametransfer.controller", function(json) {
$.each(Object.values(json), function(i, item) {
console.log(item)
var aa = '#' + item.seatNo;
if ($('.seat>input').is(aa)) {
if (item.attr == true) {
$(aa).prop('disabled', true);
}
$(aa).siblings('label').addClass('1');
}/*end of outer if */
});
});
solved :all of those attempts failed and return with all of the item.areaNo in first label elements.

You need find no. of a child (li.seat) then you can use for loop then find label one by one and put different CSS for each label. I hope it's work.

Pure JavaScript replacement for :hover

My goal, essentially, is to have the CSS :hover replaced by JavaScript. The reason is that I need a loop to be executed on a variable number of divs that will be nested inside the parent div that should react upon :hover.
The problem, however, is that I have no idea how to target just the div being hovered over without hard-coding in specific IDs - something that I will not be able to do once applied to my project, a tumblr theme.
HTML
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
</div>
</div>
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
<div class="childbox">Four</div>
<div class="childbox">Five</div>
</div>
</div>
CSS
#motherbox {
width:30%;
height:100px;
margin:100px auto;
background-color:gray;
}
JavaScript
document.getElementById("motherbox").onmouseenter = function(){
this.style.backgroundColor = 'blue';
};
document.getElementById("motherbox").onmouseleave = function(){
this.style.backgroundColor = "gray";
};
JSFiddle
My question is - how do I cause divs with the same class or id to react individually (or, rather, not all at once) on hover using javascript, rather than CSS?
Thank you for your time.

Basically you can select elements having a particular class using getElementsByClassName.
Here is a working demo.
var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) {
elements[i].onmouseleave = function(){
this.style.backgroundColor = "blue";
};
}

So use instead of getElementById this:
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
And provide classess for your divs, where you want have that event.

Switch menu with pure css?

Update
I used radio buttons, so you can only open one Item. But you cant close it. Fiddle
I'm wondering if its possible to make my menu in pure CSS. Now I modify the css with javascript.
Note: I'm not using Jquery or any other lib, thats not my question.
Fiddle of the menu I want to make in pure css
HTML:
<div class="menuItem" onclick="mySwitch(0)">Click Item 1</div>
<div class="subItem">Hi there</div>
<div class="menuItem" onclick="mySwitch(1)">Click Item 2</div>
<div class="subItem">Some text over here.</div>
<div class="menuItem" onclick="mySwitch(2)">Click Item 3</div>
<div class="subItem">Tnx for clicking</div>
CSS:
.menuItem {
display:block;
width:100%;
height:20px;
background:#ff0;
}
.subItem {
display: none; -- Hide the submenu
}
Javascript
function mySwitch(nr) {
var itemsArr = document.getElementsByClassName('subItem');
for(var i = 0; i < itemsArr.length; i++) {
var item = itemsArr[i];
if(i == nr) {
if(item.style.display == 'none') {
item.style.display = 'block';
}
else {
item.style.display = 'none';
}
} else {
item.style.display = 'none';
}
}
}

It is good practice to prevent the excessive use of JavaScript when you can reach the same result with CSS but sometimes it is necessary to change DOM elements and apply some "tricks" to get it to work and that is not so good at all.
Look at this DEMO with only CSS3. You can do a similar effect but with hover event instead of a click event. You can change :hover to :active but that will only work if you keep pressing mouse button inside the DIV elements.
This .menuItem:hover + .subItem CSS rule is showing the next .subItem element of hovered .menuItem
Since you do not want to use JavaScript events, you can't apply a class to the element. If you did so it would be easier. This way, using only CSS, you can apply some tricks like using checkboxes instead of DIV elements and use their :checked property as CSS rules to show the sublinks.
Something like this:
<label for="m1" class="menuItem">Click Item 1</label>
<input id="m1" class="cb" type="checkbox">
<div class="subItem">Hi there</div>
<label for="m2" class="menuItem">Click Item 2</label>
<input id="m2" class="cb" type="checkbox">
<div class="subItem">Some text over here.</div>
<label for="m3" class="menuItem">Click Item 3</label>
<input id="m3" class="cb" type="checkbox">
<div class="subItem">Tnx for clicking</div>
.cb {
display: none;
}
.cb:checked + .subItem {
display: block;
}
Working demo

I think you could take a look to this tutorial: Link
hope this helps

Drop down menu not dropping

I am attempting a simple drop down menu using Javascript but when I hover over my link that should display my drop down menu nothing happens. What do you think is wrong with my Javascript?
Javascript:
function onHover( divID )
{
var div = document.getElementByID( divID );
if (div)
{
div.className = "unHidden";
}
}
function onLeave( divID )
{
var div = document.getElementByID( divID );
if (div)
{
div.className = "hidden";
}
}
My css:
.hidden { visibility: hidden; }
.unHidden { visibility: visible; z-index: 30; }
And finally my HTML:
<li>
<a onmouseover="onHover('otherLinks)" onmouseout="onLeave('otherLinks')">Other Links</a>
<div class="hidden" id="otherLinks" onmouseover="onHover('otherLinks)" onmouseout="onLeave('otherLinks')">
<ul>
<li>Events</li>
<li>Food & Nutrition</li>
<li>FAQ</li>
</ul>
</div>
</li>

Is there any reason why you're using Javascript for your drop downs and not HTML and CSS?
Son of suckerfish drop downs is a good place to start for a HTML and CSS drop down option: http://htmldog.com/articles/suckerfish/dropdowns/

It is document.getElementById( divID );, note that it is "Id" not "ID". You are also missing a single quote, it should be onmouseover="onHover('otherLinks')". I also agree with Dan's answer.

May be this is the issue:
You have passed the div name like
onmouseover="onHover('otherLinks)"
Try to give the div name like
onmouseover="onHover('otherLinks')"
or try java script ddl

You can only use css. Or use the library JQuery.