-2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/style.css" />
  <title>Floza Web Design | Conception web</title>
</head>
<body>
  <header>
    <div class="nav" id="nav">
      <a href="javascript:void(0)" id="close" class="close" onclick="closeNav()">&times</a>
      <a href="#">Accueil</a>
      <a href="#">Réalisations</a>
      <a href="#">Notre équipe</a>
      <a href="#">Nos services</a>
      <a href="#">Contact</a>
    </div>
    <span id="open" class="open" onclick="openNav()">&#9776;</span>
    <script type="text/javascript">
     fonction openNav(){
       document.getElementsById('open').style.display = "none";
       document.getElementsById('nav').style.width = "100%";
       }
     fonction closeNav(){
       document.getElementsById('nav').style.width = "0";
       document.getElementsById('open').style.display = "block";
     }
    </script>
</header>
  <div class="div"></div>


</body>
</html>

Can someone tell me what is wrong ? i want to make my menu appear full page and it does not work. I'm new to Javascript. I follow a youtube video STEP BY STEP and it don't work.

Thanks

7
  • 5
    Try function with a u not fonction
    – H77
    Jun 14, 2018 at 15:42
  • 1
    OMG. The basic french to english mistake. Im feel terrible right now xD Jun 14, 2018 at 15:44
  • Back to the good 'ol syntax errors. ;)
    – Alex
    Jun 14, 2018 at 15:44
  • For the future, "it does not work" is not a useful problem statement. In this case, for example, you would have seen a syntax error on the console. Next time you ask a question, please tell how something is not working. Jun 14, 2018 at 15:44
  • 1
    All your problems should have caused error messages in the console log. Didn't you see those messages?
    – Barmar
    Jun 14, 2018 at 15:57

3 Answers 3

1
  • It needs to be function, not fonction
  • It's getElementById, not getElementsById (mind the plural here, it has to be singular)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/style.css" />
  <title>Floza Web Design | Conception web</title>
</head>
<body>
  <header>
    <div class="nav" id="nav">
      <a href="javascript:void(0)" id="close" class="close" onclick="closeNav()">&times</a>
      <a href="#">Accueil</a>
      <a href="#">Réalisations</a>
      <a href="#">Notre équipe</a>
      <a href="#">Nos services</a>
      <a href="#">Contact</a>
    </div>
    <span id="open" class="open" onclick="openNav()">&#9776;</span>
    <script type="text/javascript">
     function openNav(){
       document.getElementById('open').style.display = "none";
       document.getElementById('nav').style.width = "100%";
       }
     function closeNav(){
       document.getElementById('nav').style.width = "0";
       document.getElementById('open').style.display = "block";
     }
    </script>
</header>
  <div class="div"></div>


</body>
</html>

1
  • @NicolasBoulianne Glad to help! Please consider marking the anwer as the one that helped you out.
    – CodeF0x
    Jun 14, 2018 at 16:45
0

It appears you have misspelled the word "function". Your code

<script type="text/javascript">
 fonction openNav(){
   document.getElementsById('open').style.display = "none";
   document.getElementsById('nav').style.width = "100%";
   }
 fonction closeNav(){
   document.getElementsById('nav').style.width = "0";
   document.getElementsById('open').style.display = "block";
 }
</script>

Correct the spelling to

<script type="text/javascript">
 function....
 function....
</script>

Also, you appear to have misspelled getElementsById() There is no "s". The correct spelling is getElementById()

May I suggest you download a good code editor such as Visual Code. It is free. It will catch your misspellings.

0
0

There are a few mistakes to take care of first:

  1. "fonction" should be "function"
  2. "document.getElementsById" should be "document.getElementById" (documentation)
  3. The functions are not defined when you try to do the onclick, I'd recommend setting up event listeners for those elements separately in the javascript rather than inlining the function

Example would be something along the lines of:

document.getElementById('close').addEventListener('click', function () {
  document.getElementById('nav').style.width = "0";
  document.getElementById('open').style.display = "block";
})

document.getElementById('open').addEventListener('click', function () {
  document.getElementById('open').style.display = "none";
  document.getElementById('nav').style.width = "100%";
})

You can also create a javascript file separately to manage all these functions and reference the file either in the tag or after the tag depending on when you need it to load.

In this file I recommend setting up an event listener for the navigation event DOMContentLoaded, before you start running any functions in the file.

Example:

document.addEventListener('DOMContentLoaded', function () { /* All of your javascript code can execute here after the content on the pagehas loaded })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.