CSS style not reverting using JavaScript - 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.
}

Related

JavaScript in LiveCycle - Presence of Objects

JavaScript Geniuses,
The desired result is for "recommend" and "authorization" to show if either of the two checkboxes are checked.
/*For Checkbox1: Fund1 */
if (this.rawValue == "1") {
this.resolveNode("fund1").presence = "visible";
this.resolveNode("recommend").presence = "visible";
this.resolveNode("authorization").presence = "visible";
} else {
this.resolveNode("fund1").presence = "hidden";
this.resolveNode("recommend").presence = "hidden";
this.resolveNode("authorization").presence = "hidden";
}
/*For Checkbox2 - Fund2: */
if (this.rawValue == "1") {
this.resolveNode("fund2").presence = "visible";
this.resolveNode("recommend").presence = "visible";
this.resolveNode("authorization").presence = "visible";
} else {
this.resolveNode("fund2").presence = "hidden";
this.resolveNode("recommend").presence = "hidden";
this.resolveNode("authorization").presence = "hidden";
}
If I check one checkbox, the required "recommend" and "authorization" objects are visible. If I check both checkboxes then uncheck one, the "recommend" and "authorization" objects hide. There are checkboxes for other funds that have a different approval requirement on the form.
What causes the issue? What resolves it? What is a cleaner way to write the code? All guidance is appreciated.
Create Script Object to store all your util functions and give it a concrate name.
There you should create functions for making an object visible and invisible. This is not mandatory, but such structure will reduce the number of stupid mistakes (like missing some letters in the word "visible" and so on):
function setVisible(field){
if (field === null) {
//do what ever you want with an error
}
if (field === undefined) {
//do what ever you want with an error
}
if (field instanceof Array) {
//do what ever you want with an error
}
field.presence = "visible";
}
function setInvisible(field){
if (field === null) {
//do what ever you want with an error
}
if (field === undefined) {
//do what ever you want with an error
}
if (field instanceof Array) {
//do what ever you want with an error
}
field.presence = "invisible";
}
Create fucntions for setting needed states for authorization and recomended objects:
function setStateAuth(){
if(Page1.CheckBox1.rawValue == "1" || Page1.CheckBox2.rawValue == "1"){
setVisible(Page1.Authorization);
}else{
setInvisible(Page1.Authorization);
}
}
function setStateRec(){
if(Page1.CheckBox1.rawValue == "1" || Page1.CheckBox2.rawValue == "1"){
setVisible(Page1.Recommend);
}else{
setInvisible(Page1.Recommend);
}
}
In the click event of your CheckBox1 call methods for setting auth. and rec. state. And also set visibility for Fund1 object.
Lib.setStateAuth();
Lib.setStateRec();
if(this.rawValue == "1"){
Lib.setVisible(Fund1);
}else{
Lib.setInvisible(Fund1);
}
In the click event of your CheckBox2 call methods for setting auth. and rec. state. And also set visibility for Fund2 object.
Lib.setStateAuth();
Lib.setStateRec();
if(this.rawValue == "1"){
Lib.setVisible(Fund2);
}else{
Lib.setInvisible(Fund2);
}
Note, that working with objects using "resolveNode" method is not recommended (due to the performance issues). So, if you have a concrate, not dynamic number of pages, it is better to name then all and refer to them using their names. Like it is done in a sample, i've made
Here you can get a sample PDF

onclick has to be clicked twice to fire

My onclick function won't fire unless it is clicked twice. I am very new to javascript but so far i trie moving around the var obj line, and changing the =="none" to "none"?"empty"; which are both things I didn't understand but saw other people did to fix this problem. Neither worked.
+
function showDiv(id){
var obj = document.getElementById(id);
if( obj.style.display == "none") {
obj.style.display='block'
}
else{
obj.style.display='none'
}
}
<div id="show1">
Roughly 2-3 months.
</div>
Your problem is, that you use the style property of the element directly. Assuming, that you did not set obj.style.display = "none"; in your code explicitly, the value remains undefined until the first click. After the first click it is set and everything works like you want it to.
To solve it use getComputedStyle() to access the element's style. This includes all styles set via CSS:
function showDiv(id){
var obj = document.getElementById(id),
compStyle = window.getComputedStyle( obj );
if( compStyle.display == "none") {
obj.style.display='block'
} else {
obj.style.display='none'
}
}
You should use strict equal operators to prevent from undefined style rule.
I would rather use addEventListener instead of onclick to keep my code cleaner, here is a jsfiddle with my version (some extras as dataset and triple conditional are there, but they are not necessarily needed in your example)
var showDiv = function (ev) {
var id = ev.currentTarget.dataset.id;
var obj = document.getElementById('show' + id);
obj.style.display = (obj.style.display === "none") ? 'block' : 'none';
};
http://jsfiddle.net/mindcookin/06nvkay7/4/

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')

When element got visible in Javascript it toggle back to hidden

Please help as when ever i clcik and call Javascript function to unhide an element it turn back hidden again. it takes a second or less.
HTML
<asp:Button ID="btnFromCalOpen" Width = "35" runat="server" Text=">" style="display:none; visibility:hidden;" OnClientClick ="ShowCal()" />
Javascript
function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.visibility = "hidden" ) {
alert("Show");
elem.style.visibility = "visible";
elem.style.display = "inline";
}
else {
alert("Hide");
elem.style.visibility = "hidden";
elem.style.display = "none";
}
}
it like when ever i click on the button it refresh its style properties of all elements
Please help
You have an error/bug on your code here
if (elem.visibility = "hidden" ) {
you not check for the if, but you set it hidden !
To avoid this kind of errors try this way / trick
if ("hidden" == elem.visibility ) {
Two major problems in your code.
elem.visibility is not an attribute of your object. If you want to look at the style setting, it would be elem.style.visibility.
A comparison is done with == or ===, not with =. You were doing an assignment operation with =.
Try this code:
function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.style.visibility == "hidden" ) {
alert("Show");
elem.style.visibility = "visible";
elem.style.display = "inline";
}
else {
alert("Hide");
elem.style.visibility = "hidden";
elem.style.display = "none";
}
}
FYI, there's no need to set both style.visibility and style.display. If you're going to set style.display to "none", then the visibility setting isn't needed.
A simpler version of your code would be this (which you can see working here in this jsFiddle):
function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.style.display == "none" ) {
elem.style.display = "inline";
} else {
elem.style.display = "none";
}
}
And, remove the visibility: hidden from the HTML for this tag. The display: none is all you need.
For reference (in case this is a possibility), this is one of those places that libraries like jQuery or YUI are handy. In jQuery this would just be:
function ShowCal() {
$("#MainContent_CalendarFrom").toggle();
}

Javascript toggle issue

This is my script :
window.onload = function (){
var title = document.getElementsByTagName('h1')[0].id = "heading1";
document.getElementById(title).onclick = function (e){
var para = this.nextSibling.style.display = 'block';
var newVal = (para == "block") ? "none" : "block";
alert(newVal);
}
}
The result I need is for the alert value to toggle from block to none and back. But I am always getting "none". What is the problem with my code?
window.onload = function () {
var firstH1 = document.getElementsByTagName('h1')[0];
firstH1.id = "heading1";
firstH1.onclick = function() {
var currentValue = this.nextSibling.style.display;
this.nextSibling.style.display = (currentValue == "none") ? "block" : "none";
}
}
Note a few things: I simplified your element fetching because it doesn't make sense to fetch an element, assign it an id, then use that id to find that same element again.
I also switched block/none ordering, because if no style is displayed then it would be blank -- and your first click would assign block to it - and it would not disappear. This way it does.
Well, para will always be "block", and therefore newVal will always be "none". So that behavior is expected. What are you trying to do? you are not toggling the property with your curent code.

Categories

Resources