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.
}

How to decrease number of links in this Script by assing a single Variable

Any Javascript Expert There how help me in this script ?
Actually i am a template designer, i create free and premium templates, my free templates include non-removal footer links, which means user will have to keep the footer link for my template.
Come to main point.
here is my script:
<script>
window.onload = function() {
var e = document.getElementById("credits");
setInterval(function() { // check every 2 seconds
if (e == null) { // if div is removed then redirect
window.location.href = "http://www.example.com/"
}
// if div is hidden with css visibility then redirect
if ($(e).css('visibility') == 'hidden') {
document.location.href = "http://www.example.com";
}
// if div is display none then redirect
if ($(e).css('display') == 'none') {
document.location.href = "http://www.example.com";
}
// if div is hidden with css collapse then redirect
if ($(e).css('visibility') == 'collapse') {
document.location.href = "http://www.example.com";
}
}, 2000) // close time function
e.setAttribute("href", "http://www.example.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.innerHTML = "Example"
}
</script>
<a id="credits"></a>
Now, if you see the above script, you will observe that it uses 4 http://www.example.com links except e.setAttribute("href", "http://www.example.com/");. whilte i want to do some tricks with this JS so that i uses only one time the main link http://www.example.com by assign variable and use that instead of full link.
Like this:
<script>
window.onload = function() {
var e = document.getElementById("credits");
setInterval(function() { // check every 2 seconds
if (e == null) { // if div is removed then redirect
window.location.href = "e"
}
// if div is hidden with css visibility then redirect
if ($(e).css('visibility') == 'hidden') {
document.location.href = "e";
}
// if div is display none then redirect
if ($(e).css('display') == 'none') {
document.location.href = "e";
}
// if div is hidden with css collapse then redirect
if ($(e).css('visibility') == 'collapse') {
document.location.href = "e";
}
}, 2000) // close time function
e.setAttribute("href", "http://www.example.com/");
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.innerHTML = "Example"
}
</script>
As you see i added "e" variable instead of full link but it does not work, it is redirecting to example.com/e which is not valid. i gave you the idea. so make it possible
So, how to do this ? i already assign "e" variable to my main link.
Please share the full coding with me thanks.

Ok. First off, "e" is NOT a variable, it is a string literal. Which means you are literally assigning "e" to document.location.href. Additionally, you have previously created a variable named "e", and assigned it the value of a DOM element with the ID "credits."
I'm not 100% clear on what you're trying to do, but the following might help:
<script>
window.onload = function() {
var e = document.getElementById("credits");
var redirect = 'http://www.example.com';
// check every 2 seconds
setInterval(function() {
// if div is removed then redirect
if (e == null) {
window.location.href = redirect
}
// if div is hidden with css visibility then redirect
if ($(e).css('visibility') == 'hidden') {
document.location.href = redirect;
}
// if div is display none then redirect
if ($(e).css('display') == 'none') {
document.location.href = redirect;
}
// if div is hidden with css collapse then redirect
if ($(e).css('visibility') == 'collapse') {
document.location.href = redirect;
}
}, 2000) // close setInterval
e.setAttribute("href", redirect);
e.setAttribute("ref", "dofollow");
e.setAttribute("title", "Blogger Templates");
e.innerHTML = "Example"
}
</script>

The "e" you've added isn't a variable, it's a string. Setting it as the href attribute will just set href="e", which will link you to /e on the current domain.
You need to use either:
var siteName = "http://www.example.com";
// Wherever you need it:
document.location.href = siteName;
Or just use the OR operator, ||, to combine your if statements. You can repeat this for all cases.
if (e == null ||
$(e).css('visibility') == 'hidden') {
document.location.href = "http://www.example.com";
}
Other than that, what you're trying to do is really a bad practice. I'd advice against it.

window location with the same page(div id)

How to make window.location go to the same page but with another different div tag(or through div id like this: href="#id").
if((mins == 0) && (secs == 0)) {
window.alert("Time is up.Your score is "+score); // change timeout message as required
window.location = "index.html" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
any help would be appreciated.
thanks in advance.

You can use .scrollIntoView() on the targeted element.
document.getElementById("the_div_id").scrollIntoView(true);
MDN scrollIntoView()

Just add the hash as a string:
window.location + '#id';

OnClick action doesn't work at once but only for the first load. Live example included.

I have make a hide/show button for my site's header, but I have this "issue". If user load my site for first time, or after refresh, this button needs to click two times for work. But only for the first time. Then it works normally! Any idea why is this happening?
Live example at the comment below. Thank you in advance!!!

The js code is:
function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block')
sheader_1.style.display = 'none',
sheader_2.style.display = 'block';
else sheader_1.style.display = 'block',
sheader_2.style.display = 'none';
;}
if you alert the value of sheader_1 the first time you load the page, result is an empty string, so your code won't do anything (it will jump to the else statement).
One way to make it work would be:
function display_news(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
//here we also check if display property is empty
if (sheader_1.style.display == 'block' || sheader_1.style.display == '')
sheader_1.style.display = 'none',
sheader_2.style.display = 'block';
else sheader_1.style.display = 'block',
sheader_2.style.display = 'none';
;}

function display_header(){
var sheader_1 = document.getElementById("sheader_a");
var sheader_2 = document.getElementById("sheader_b");
if (sheader_1.style.display == 'block' || sheader_1.style.display=='')
{
sheader_1.style.display = 'none';
sheader_2.style.display = 'block';
}
else {
sheader_1.style.display = 'block';
sheader_2.style.display = 'none';
}
}
WORKING FIDDLE DEMO

window.getComputedStyle(sheader_1).display
You need to get the computed style of the element. Else this conditional if (sheader_1.style.display == 'block') won't work because display will be empty.
In Internet Explorer the method for computed style is: element.currentStyle.
I suggest using jQuery in this case.

When the page loads, sheader_1's display is not block, but an empty string.
You can therefore change your condition to:
if (sheader_1.style.display != 'none')

hide parent div if link inside has empty href

I need to hide the buttonholder Div which is styled to look like a button. But the button styles images need to hide if the link itself is empty.
<div class="RegisterBtnHolder">
<span class="RegisterOrangeButton">
<span>
Register Online
</span>
</span>
</div>
I need to hide RegisterBtnHolder if the anchor tag has empty href or empty text..How do i do this in jquery.

give this a shot:
$(function(){
$("a[href=''],a:empty","div.RegisterBtnHolder").closest("div.RegisterBtnHolder").hide();
});

Using jQuery:
var button = $('.RegisterBtnHolder').find('a'); // caches the <a> element from the dom.
if(button.attr('href') == '') {
button.hide();
}
The above answer prolly works aswell, just remember try to avoid jumping into the DOM as much as possible, it will slow down your load time.

Fiddle
$('.RegisterBtnHolder a').each(function() {
if($(this).attr('href') === '' || $(this).text() === '') {
$(this).parents('.RegisterBtnHolder').hide();
}
});

Does this work for you:
if ($('div.RegisterBtnHolder a').text() == '' || $('div.RegisterBtnHolder a').attr('href') == '') $('div.RegisterBtnHolder a').hide()​

sample code below
if($("a").attr("href") === "" || $("a").text()===""){
$(this).closest("div").hide();
}

Useing filter() helps
http://api.jquery.com/filter/
$('.RegisterBtnHolder a').filter(function(){
/* add any additional tests you might need such as looking for "#" as an href*/
return $(this).attr('href')=='' || $.trim($(this).text())=='';
}).closest('.RegisterBtnHolder').hide();

JavaScript Only
var dilly = document.querySelectorAll('.RegisterBtnHolder a'), i;
for (i = 0; i < dilly.length; ++i) {
var $true = (dilly[i].getAttribute('href') == '')
if ($true == true) {
dilly[i].parentElement.style.display = 'none'
} else {
dilly[i].parentElement.style.border = "1px dotted silver"
}
}
jsfiddle