Develop Reference

CSS style not reverting using JavaScript

I am trying to set a CSS property back and forth using JavaScript depending on its value.
The class name menu is set to be hidden on page load. When I call the function to set it to visible it is successful. However, when I call it again to change it back it doesn't set it to hidden. It is seen as always set to visible.
let menu = document.querySelector('.menu');
if (menu.style.visibility = 'hidden') {
menu.style.visibility = 'visible';
console.log('visible'); // always shows this.
} else {
menu.style.visibility = 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}
I am confused as to why it can do the first but not the second. I have tried using a else if condition:
else if (menu.style.visibility = 'visible')
I also tried using the setAttribute method but it's always the same outcome.
I need to be able to switch back and forth.

In JavaScript by using = you assign a value to something BUT if you use == you are checking if something is equal to something else.
let menu = document.querySelector('.menu');
if (menu.style.visibility == 'hidden') {
menu.style.visibility = 'visible';
console.log('visible'); // always shows this.
} else {
menu.style.visibility = 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}

Kindly use below condition
if (menu.style.visibility == 'hidden') //change ==

Your conditional isn't valid. You're actually setting the value in the if statement.
if (menu.style.visibility = 'hidden') // this sets the value
It should be this:
if (menu.style.visibility == 'hidden') // this compares the value

This code will toggle the visibility of a div on your page.
function togglediv() {
var div = document.getElementById("menu");
div.style.display = div.style.display == "none" ? "block" : "none";
}
<button onclick="togglediv('menu')">Toggle div</button>
<div id="menu">div</div>

The error is in your if statement. So if you change the single equality to a double equal sign: ==, your code should work:
like:
if (menu.style.visibility == 'hidden')

Your syntax for comparing is wrong you need to use == while comparing any field in javascript so just do :
if (menu.style.visibility == 'hidden') {
menu.style.visibility = 'visible';
console.log('visible'); // always shows this.
} else {
menu.style.visibility == 'hidden';
console.log('hidden'); // doesn't get to here when .menu is visible.
}

Javascript if function with showing and hiding elements: In depth analysis of why if works in some cases and not others

The purpose of the code is to hide/show an element when the header element is clicked. Why code works and doesn't isn't clear.
Example 1
function showHideAnswers (id) {
var x = document.getElementById(id);
if (x.style.display === "") {
x.style.display = "block";
}
}
The above code works. Notice the display if comparision of "" rather than none.
Example 2
function showHideAnswers(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = 'block';
}
}
This code does not work. Notice display being compared to "none", which I think is the part that is causing it to fail; however, "none" works in example 3.
Example 3
function showHideAnswers(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
This code works, which causes me to be confused as to why example 2 doesn't work.

element.style will return the value only inline style is present otherwise "" will be returned
Use Window.getComputedStyle instead!
function showHideAnswers(id) {
var x = document.getElementById(id);
var style = window.getComputedStyle(x, null);
if (style.display === "none") {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<div id='elem'>Element</div>
<button onclick="showHideAnswers('elem')">Click me!</button>

in the second example you are asking if x.style.display is equal to the string "none". the default value of display is inline so its checking if "inline" === "none". To fix the problem you must put the x.style.display to "none" before you run this code

In example 1, it will not work if display is already set to anything. (This will only show if display is unset, no hiding).
In example 2, you will only get action if display is explicitly set to none already. (This will only show if the element isn't already hidden, no hiding)
In example 3 you have an else clause which covers the opposite case, and so it will work for both cases (show and hide). Another reason that 3 works is because if display is unset, then the else clause will cause it to be set to none, and then block and vice-versa as you continue to call the function.

Onclick function that changes the css of a element

I now have this onclick function:
<p onclick="open3()" >Uw tuin blijft mooi door vakkundig en regelmatig onderhoud.</p>
function open3 ()
{
document.getElementById("c").style.display = "block";
}
What I want is that when I clicked on open three that it somehow changes it's value so I can click on it again to set style.display to none.
I tried this with a Boolean that set's it to true or false and then changes that but that didn't work

You can add an if statement that checks the current value of the applied style and changes it appropriately.
Using this approach you don't need to declare (and keep) any additional variable in your code, while still being able to achieve the desired effect.
An example is shown below.
function open3 () {
var c = document.getElementById('c');
if (c.style.display === 'block') {
c.style.display = 'none';
} else {
c.style.display = 'block';
}
}

Try using a check in the function:
function open3 () {
var c = document.getElementById("c");
if (c.style.display === 'block') {
c.style.display = 'none';
} else {
c.style.display = 'block';
}
}

Using pure Javascript:
function open3 ()
{
if (document.getElementById("c").style.display == "block")
document.getElementById("c").style.display = "none";
else
document.getElementById("c").style.display = "block";
}
Or you can use jQuery instead:
function opne3()
{
$("#c").toggle();
}
Hope it helps.

My approach is slightly different and creates a toggler function that returns a function to toggle whatever elements you pass into it with an initial state. You can keep reusing this function whenever you need to toggle an element so you don't repeat code.
var toggler = function(el, init) {
var flag = init;
return function(e) {
flag = !flag;
el.style.display = flag ? 'block' : 'none';
};
}
Create a new function passing in the element to be toggled and its initial state.
var toggleC = toggler(document.querySelector('#c'), false);
Remove the inline JS (best practice) and use addEventListener to target the element instead.
document.querySelector('#clicker').addEventListener('click', toggleC);
DEMO

A short version of the if/else answers on this page:
function open3 () {
var c = document.getElementById('c');
c.style.display = (c.style.display == 'block' ? 'none': 'block');
}

Try this
HTML:
<p id="togglethingy">Uw tuin blijft mooi door vakkundig en regelmatig onderhoud.
CSS:
#togglethingy{
display:block;
}
jQuery:
$(function(){
var $tog_ele = $("#togglethingy")
$tog_ele.click(function() {
$tog_ele.toggle();
});
});

How do I make the div dissapear after onclick nr 2?

I tried this but obv it didnt work. Im very new to JS, how do I do this?
function test() {
if(document.getElementById('div1').style.display = 'block'){
document.getElementById('div1').style.display = 'none';
}
if(document.getElementById('div1').style.display = 'none'){
document.getElementById('div1').style.display = 'block';
}
}

The code you have (once corrected) will toggle visibility but won't make an element invisible on the 2nd time a user clicks on it.
I've set up a JSFiddle here that uses plain JavaScript in order to do what you're asking in the title of the question.
Let's assume that your HTML looks something like this, with a DIV that has a class name of "tester":
<div class="tester">This is a triumph.</div>
<p>I'm writing a note here; huge success</p>
One way of achieving this is to add a data element to the DIV to track the number of clicks and then, when the number of clicks hits two, we hide it. The code for that looks like this:
document.getElementsByClassName("tester")[0].onclick = function(targ) {
if(!targ.target.hasAttribute("data-click")) {
targ.target.setAttribute("data-click",0);
}
var currClicks = +targ.target.getAttribute("data-click");
if(currClicks==2){
targ.target.style.display = "none";
} else {
targ.target.setAttribute("data-click", currClicks+1);
}
};
Again, this will get you the functionality you asked about in your question but does not match your code sample as it doesn't really do what you want. If you need any more information on this feel free to ask, but I think this will get you what you're looking for.

It shouldn't be =, it should be == in JavaScript if condition and twice if condition always setting style.display = 'block', so either use else if or simply else.
<div id="div1" style="display:block"></div>
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else if(document.getElementById('div1').style.display == 'none') {
document.getElementById('div1').style.display = 'block';
}
}
or
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else{
document.getElementById('div1').style.display = 'block';
}
}

Pass function argument into getElementById "id"

It's a js function that shows various text input forms when you select an apropriate value from a select box.
function arata_formular(formular) {
document.getElementById("formular").style.visibility = "visible";
if(document.getElementById("formular").style.display == "none" ) {
document.getElementById("formular").style.display = "inline";
}
else {
document.getElementById("formular").style.display = "visible";
}
}
But doesn't work as expected. Although it has an argument regardless of what i'll pass into there (lets say arata_formular(entropy) it will still look for the "formular" id not "entropy" one. How can I make the 'inline' insert?
Unfortunately I can't use jquery on this or other frameworks. I must use only javascript.
Thanks!

Just get rid of the quotes.
function arata_formular(formular) {
var el = document.getElementById( formular );
el.style.visibility = "visible";
el.style.display = el.style.display === "none" ? "inline" : "visible";
}
OR
function arata_formular(formular) {
document.getElementById( formular ).style = {
visibility: "visible",
display: el.style.display === "none" ? "inline" : "visible"
}
}

formular is a variable but you are using it like a string. Also, you should cache it:
function arata_formular(formular) {
var el = document.getElementById(formular);
el.style.visibility = "visible";
if(el.style.display == "none" ) {
el.style.display = "inline";
}
else {
el.style.display = "visible";
}
return el;//in case you want to use the element
}