Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times

    Urgent help needed

    I'm new to javascript and I cant get the click eventlistener to work, its suppose to set the display of the ul in the header to display: block instead of none

    heres the html

    <!doctype html>
    <html lang="en">

    <head>

    <meta charset="utf-8">
    <title> How the web works </title>
    <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
    <div id="page">

    <header>
    <h1> Cole Pratt <span id="h1s"> No.2968615 </span> </h1>
    <img src="images/menuicon.png" alt="menuicon" width="40" id="menuicon"/>
    <ul id="navlink">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">bio</a></li>
    </ul>
    </header>

    </div>
    <script src="scripts/mobilemenu.js" type="text/javascript"></script>
    </body>

    </html>
    css

    body {
    background-color: rgb(40, 40, 40);
    font-size: 16px;
    margin: 0 auto;
    font-family: helvetica, arial;
    }



    header {
    position: relative;
    background: linear-gradient(rgb(40, 40, 140), rgb(50,50,180));
    min-height: 40px;
    box-shadow: 0px 0px 5px black inset;
    }

    header h1 {
    position: relative;
    padding: 10px;
    font-style: italic;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    }

    #h1s {
    font-size: .6em;
    }

    img {
    position: absolute;
    top: 0px;
    right: 10px;
    }

    header ul {
    position: relative;
    display: none;
    }

    header ul li {
    background-color: red;
    text-align: center;
    height: 20px;
    background-color: grey;
    box-shadow: 0px 0px 1px black inset;
    }

    header ul li a {
    text-decoration: none;
    color: white;
    line-height: 20px;
    font-size: .6em;
    }

    and the js

    var menuButton = document.getElementById("menuicon");
    var menu = document.getElementById("navlink");


    function menuclick(){
    if (menu.style.display == none){
    menu.style.display = "block";
    }
    else {
    menu.style.display = "none";
    }
    }

    menuButton.addEventListener("click", menuclick);

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You can't read the current display setting that way.

    There is a way to read it, but the better way to do this is to remove or add a class to the element.

    So, do

    Code:
    if(menu.classList.contains('shown'){
      menu.classList.remove('shown');
    } else {
      menu.classList.add('shown');
    }
    Then, set the display to none in the default CSS for that element, and create a class .shown and set display to block.

    Or, you can use the classList.toggle() method, but I'm not sure about the support levels for it. https://developer.mozilla.org/en-US/...ment/classList
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com