CODEWITHSUNDEEP
javascript
Software Architect
Software Architect

Reputation: 141

after clicking on button only first part of JS script is used, after second click none works

Hey this is my function

function open() {
            
        document.getElementById("main").style.marginLeft = "20%";
        document.getElementById("mySidebar").style.width = "20%";
        document.getElementById("mySidebar").style.display = "block";
    document.getElementById("openNav").style.display = 'inline-block';
        }
function close() {
        document.getElementById("main").style.marginLeft = "0%";
        document.getElementById("mySidebar").style.display = "none";
        document.getElementById("openNav").style.display = "inline-block";
}

function Test() {
var item = document.getElementById("main").style.marginLeft ="";
if (item = "0%")
{
    w3_open()
    item = document.getElementById("main").style.marginLeft = "20%";
} else if (item = "20%")
{
    w3_close()
}

}

First part works perfectly, but after second click none happens..

Idk whats wrong, can someone some suggestions?

///UPDATE

After clicking this:

<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="Test()">&#9776;</button>

I can open sidebar, but after clicking again i cannot close it. :/

Upvotes: 0

Views: 84

Answers (4)

pzutils
pzutils

Reputation: 530

item will never equal "0%" because you're specifically setting it to "" here:

var item = document.getElementById("main").style.marginLeft ="";

This is why it's always going to the else statement. Change that line that line to var item = document.getElementById("main").style.marginLeft

Also just noticed your if else statement is messed up - you need to use == instead of =. Your if statement is currently assigning item = "0%" but you want it to evaluate if item == "0%" instead. So this is actually another reason why it's always opening - because assigning a value inside an if statement will basically always evaluate to true. Try fixing these issues and let me know if the code works

One more note - w3_open() and w3_close() should just be open() and close()

Upvotes: 1

Metro Smurf
Metro Smurf

Reputation: 38335

There are a number of issues going here, including assigning values when they should be performing comparisons (noted in several comments and other answers).

Even if the syntax is fixed, I suspect the function will never work because the marginLeft value has never been set to begin with, which means neither open() nor close() will ever be invoked since they are only invoked if a specific value is found.

Everything can be simplified in the Test() method with a single evaluation. Here's an updated version:

function open() {
   document.getElementById("main").style.marginLeft = "20%"
   document.getElementById("mySidebar").style.width = "20%"
   document.getElementById("mySidebar").style.display = "block"
   document.getElementById("openNav").style.display = "inline-block"
}

function close() {
   document.getElementById("main").style.marginLeft = "0%"
   document.getElementById("mySidebar").style.display = "none"
   document.getElementById("openNav").style.display = "inline-block"
}

function Test() {
   var item = document.getElementById("main").style.marginLeft

   // simplified condition
   if (item == "20%") close()
   else open()
}

Upvotes: 2

anurag-dhamala
anurag-dhamala

Reputation: 699

You need to set your default marginLeft of element wtih id "main" to 0% in stylesheet. Then change your functions as below:

function open() {
        
    document.getElementById("main").style.marginLeft = "20%";
    document.getElementById("mySidebar").style.width = "20%";
    document.getElementById("mySidebar").style.display = "block";
    }
function close() {
    document.getElementById("main").style.marginLeft = "0%";
    document.getElementById("mySidebar").style.display = "none";
}

function Test() {
    var item = document.getElementById("main").style.marginLeft;
    if (item == "0%"){
        open()
    } else if (item == "20%"){    
         close()
       }
}

Upvotes: 1

reza hrkeng
reza hrkeng

Reputation: 80

I hope it works

If it didn't .plz let me know

First why u write this.as they're same in both open and close function?

Id("openNav").style.display='inline-block';

In

function close() and open()

try this with above note.

function open() { 

document.getElementById("main").style.marginLeft = "20%"; 

  document.getElementById("mySidebar").style.width = "20%";  
 
document.getElementById("mySidebar").style.display = "block"; 

 document.getElementById("openNav").style.display = 'inline-block'; } 
 function close() { 

 document.getElementById("main").style.marginLeft = "0"; 

 document.getElementById("mySidebar").style.width = "0 !important"; 

 document.getElementById("openNav").style.display = "inline-block"; } 
function Test() { 
var item=document.getElementById("main").style.marginLeft ;
 if (item == "0") { 
 w3_open() item = document.getElementById("main").style.marginLeft ;
} else if (item == "20%") { w3_close() }

Upvotes: -1

Related Questions