Switch between 2 functions

Question

I am starting completely with html and javascript and coding in general. I want to bild a website as part of my learning. The website will be about wedding films and clips.

I want to have a side menu which menu button (three horizontal lines) in top left corner. When the menu button is 'clicked' the side menu will roll out and menu button will change to cross. When the menu button is a cross, it should have a function of hiding the side menu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wedding Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script:700">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="main.js"></script>
</head>

<body>
    <div id="side-menu" class="side-nav">
        <a href="#" class="btn-close" onclick="closeSideMenu()">&times; </a>
        <ul class="fa-ul">
            <li><a href="#"><img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png"></img>&emsp;Home</a></li>
            <li><a href="#">Book&nbsp;a&nbsp;date</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Check</a></li>
        </ul>
    </div>
    <div>
        <span class="open-slide">
            <a href="#" onclick="toCross(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </a>
        </span>
    </div>

    <p class="quote">One video, <br> thousands memories.</p>
</body>
</html>

The connected javascript file is here:

var nav = false;

function openSideMenu(){
    document.getElementById('side-menu').style.width = '250px';
    document.getElementById('main').style.marginLeft = '250px';
    nav = true;
}

function closeSideMenu(){
    document.getElementById('side-menu').style.width = '60px';
    document.getElementById('main').style.marginLeft = '60px';
    nav = false;
}

function toCross(x){
    x.classList.toggle("change");
    nav ? closeSideMenu() : openSideMenu();
}

I have found similar question asked here: JavaScript Toggle between 2 Functions but for some reason the code stops after the first openSideMenu() is executed and the nav variable does not change from false to true.

I am stuck here hating my life and I will be so grateful for a help!

score 0 · Accepted Answer · answered Jun 10 '18 at 20:00

As far as I can see you haven't provided a HTML markup containing the element #main. It seems document.getElementById('main') is what causes the code to not work:

var nav = false;

function openSideMenu() {
  document.getElementById('side-menu').style.width = '250px';
  //document.getElementById('main').style.marginLeft = '250px';
  nav = true;
}

function closeSideMenu() {
  document.getElementById('side-menu').style.width = '60px';
  //document.getElementById('main').style.marginLeft = '60px';
  nav = false;
}

function toCross(x) {
  console.log(nav)
  x.classList.toggle("change");
  nav ? closeSideMenu() : openSideMenu();
}

<div id="side-menu" class="side-nav">
  <a href="#" class="btn-close" onclick="closeSideMenu()">&times; </a>
  <ul class="fa-ul">
    <li>
      <a href="#"><img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png">&emsp;Home</a>
    </li>
    <li><a href="#">Book&nbsp;a&nbsp;date</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Check</a></li>
  </ul>
</div>
<div>
  <span class="open-slide">
            <a href="#" onclick="toCross(this)">x
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </a>
        </span>
</div>

<p class="quote">One video, <br> thousands memories.</p>

Switch between 2 functions

1 Answers1