0

What would be the practical approach to the issue of this type?

I'm writing a function which aims to move the div left and right on toggle.

The approach I have decided to take is as below. Can someone explain why this is not working as I expect?

I'm aware that there may be another solution but this resolving this issue will allow me to use this practice for other scenarios.

If I understand correctly the bool can not be returned using return statement, but can the variable with bool in it?

For some reason my function is not reaching to "else if" statement which I thought it would after switching the bool inside of "if"...

The part of this code is basic so I will not include full script.

Code:

menuBtn = document.getElementById('mm');
menuBtn.onclick = function() {onMenuPress()};
let sidebar = document.getElementById('sidebar');

function onMenuPress() {
    let move = true;
    console.log(move);

    if (move == true) {
        sidebar.style.transform = "translate(-300px)";
        let move = false;
        console.log("pressed");

        return move;
    } 
    else if (move == false) {
        sidebar.style.transform = "translate(100px)";
        console.log("comeback");
    }

Thanks for all responses in advance.

Krystian
  • 3
  • 1
  • `let move = true;` then `if (move == true) {` That will always be true. Maybe you want `move` to be a global variable (declared outside of the function). – 001 Jan 09 '21 at 02:34
  • My suggestions, please learn more, when you learn then you can find how to create a variable and how to use if statement. – MUHAMMAD ILYAS Jan 09 '21 at 02:36
  • Hi @JohnnyMopp. You answer sorted out my issue. Many thanks. – Krystian Jan 09 '21 at 02:43
  • 1
    @MUHAMMADILYAS Part of learning is asking questions even on the most trivial questions. Posting my questions here was to seek the solution not to get such a brilliant recommendation. As you can imagine I'm educating myself on this at this very moment. – Krystian Jan 09 '21 at 02:44
  • Why not have a class for one instance of your positioning and another class for the other instance of positioning, then use javascript `.toggle()` with a traditional event listener. `element.addEventListener('click', functionToMove)` in your function you includes the code that toggles the class. – dale landry Jan 09 '21 at 02:46
  • @Krystian you are right. asking questions is good for learning. just go through the scope of variables you can get your answer by your self. here is a good explanation about that https://stackoverflow.com/a/500459/13647574 – MUHAMMAD ILYAS Jan 09 '21 at 02:55

2 Answers2

0

Declaration of variables was wrong.

You must declare a global variable.

Right code

menuBtn = document.getElementById('mm');
menuBtn.onclick = function() {onMenuPress()};
let sidebar = document.getElementById('sidebar');
let move = true;

function onMenuPress() {
    console.log(move);

    if (move == true) {
        sidebar.style.transform = "translate(-300px)";
        move = false;
        console.log("pressed");

        return move;
    } 
    else if (move == false) {
        sidebar.style.transform = "translate(100px)";
        console.log("comeback");
    }
Canopus
  • 565
  • 3
  • 17
0

Silly mistake which was relating to the global variable. Corrected code for others in need below:

menuBtn = document.getElementById('mm');
menuBtn.onclick = function() {onMenuPress()};
let sidebar = document.getElementById('sidebar');
move = true;

function onMenuPress() {
    
    console.log(move);

    if (move == true) {
        sidebar.style.transform = "translate(-300px)";

        move = false;
        console.log(move);
        console.log("pressed");

        return move;
    } 
    else if (move == false) {
        sidebar.style.transform = "translate(100px)";
        console.log("comeback");
        move = true;
    }
}
Krystian
  • 3
  • 1