1

I'm building a website using html, css and JavaScript. I'm having issues with the buttons on my page, where I have to press them twice to activate them, after that they work fine. It appears that this happens only on loading of the page.

I believe it's to do with the JavaScript functions but can't be certain. I have included an html page(account.htm, I haven't started my index page yet) and accompanying css page. Any help would be appreciated. Thanks in advance.

HTML:

<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="mobstyle.css">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<body>

<div id="container">
<div id="head">
<div id="title1"></div>
<a href="index.htm"><div id="title2"><b><center>OpenMarket.co.uk</center></b></div></a>
<div id="title3" onclick="menuFunction()" style="menuimg"><center><b></b></center></div>
</div>

<div id="menu">
<div id="menuitemholder">
<a href="index.htm"><div id="menuitem1">Homepage</div></a>
<a href="account.htm"><div id="menuitem2">Account</div></a>
<a href="contact.htm"><div id="menuitem3">Contact</div></a>
<div id="menuitem4">
    <form action="search.php" method="post">
        <input type="search" name="search" class="search" placeholder="Ticker/User...">
        <input type="submit" id="searchbuttonid" class="searchbutton" value="">
    </form>
</div>
</div>
</div>

<div id="loggedon">Hi Dazbrad. Logout?</div>

<div id="body">
<div id="account">
<div id="accreg" onclick="myFunction1()"><center>Register</center></div>
<div id="linkspacer"></div>
<div id="acclog" onclick="myFunction2()"><center>Sign In</center></div>
<div id="linkspacer"></div>
<div id="accfor" onclick="myFunction3()"><center>Forgot?</center></div>
<br>

<div id="register">
    <br>
    <form action="register.php" method="post">
    <br><br>Username:<br>
    <input type="text" name="user" placeholder="Enter a username..." required><br>
    <br>Email Address:<br>
    <input type="email" name="email" placeholder="Enter an email address..." required><br>
    <br>Password:<br>
    <input type="password" name="pass" placeholder="Enter a password..." required><br>
    <br>Retype Password:<br>
    <input type="password" name="passconfirm" placeholder="Confirm your password..." required><br>
    <br><br>
    <input type="submit" value="Register">
    </form>
</div>
<div id="login">
    <br>
    <form action="login.php" method="post">
    <br><br>Email Address:<br>
    <input type="email" name="email" placeholder="Enter your email address..." required><br>
    <br>Password:<br>
    <input type="password" name="pass" placeholder="Enter your password..." required><br>
    <br><br>
    <input type="submit" value="Sign In">
    </form>
</div>
<div id="forgotten">
    <br>
    <form action="forgotten.php" method="post">
    <br><br>Email Address:<br>
    <input type="email" name="email" placeholder="Enter your email address..." required><br>
    <br><br>
    <input type="submit" value="Submit">
    </form>
</div>
</div>

<script>
function menuFunction(){
    var x = document.getElementById("menu");
    var y = document.getElementById("menuitemholder");
    if (x.style.height === "38px"){
        x.style.height = "285px";
        y.style.display = "block"
    }
    else{
        x.style.height = "38px";
        y.style.display = "none"
    }
}
</script>
<script>
function myFunction1(){
    var x = document.getElementById("register");
    var y = document.getElementById("login");
    var z = document.getElementById("forgotten");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "none";
        document.getElementById("accreg").style.backgroundColor="lightblue";
        document.getElementById("acclog").style.backgroundColor="blue";
        document.getElementById("accfor").style.backgroundColor="blue";
    } 
    else{
        x.style.display = "none";
        document.getElementById("accreg").style.backgroundColor="blue";
    }
}
</script>
<script>
function myFunction2(){
    var x = document.getElementById("register");
    var y = document.getElementById("login");
    var z = document.getElementById("forgotten");
    if (y.style.display === "none") {
        y.style.display = "block";
        x.style.display = "none";
        z.style.display = "none";
        document.getElementById("accreg").style.backgroundColor="blue";
        document.getElementById("acclog").style.backgroundColor="lightblue";
        document.getElementById("accfor").style.backgroundColor="blue";
    }
    else{
        y.style.display = "none";
        document.getElementById("acclog").style.backgroundColor="blue";
    }
}
</script>
<script>
function myFunction3(){
    var x = document.getElementById("register");
    var y = document.getElementById("login");
    var z = document.getElementById("forgotten");
    if (z.style.display === "none") {
        z.style.display = "block";
        x.style.display = "none";
        y.style.display = "none";
        document.getElementById("accreg").style.backgroundColor="blue";
        document.getElementById("acclog").style.backgroundColor="blue";
        document.getElementById("accfor").style.backgroundColor="lightblue";
    }
    else{
        z.style.display = "none";
        document.getElementById("accfor").style.backgroundColor="blue";
    }
}
</script>



</div>
<div id="foot"><center>Copyright© 2018. All rights reserved.</center></div>
</div>

</body>
</html>

CSS:

body{
    background-color:blue;
    margin:0px;
}

h1{
    color:white;
    text-align:center;
}

p{
    font-family:verdana;
    font-size:20px;
}

div#title1{
    width:15%;
    height:39px;
    background-color:blue;
    color:white;
    float:left;
}

div#title2{
    width:70%;
    height:auto;
    background-color:blue;
    padding-top:10px;
    padding-bottom:10px;
    color:white;
    float:left;
}

div#title3{
    width:15%;
    height:39px;
    background-color:blue;
    background-image:url('Website/images/menuIcon.png');
    background-repeat:no-repeat;
    background-position:center center;
    color:white;
    float:left;
}

div#menu{
    width:100%;
    height:38px;
    background-color:#999999;
    //background-color:grey;
    color:white;
    border-bottom:1px solid black;
}


div#menuitemholder{
    width:100%;
    height:auto;
    background-color:red;
    display:none;
    padding-left:10px;
    padding-right:10px;
}

div#menuitem1{
    width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);
    height:40px;
    background-color:#999999;
    background-image:url('Website/images/home999.png');
    background-repeat:no-repeat;
    background-position:center right;
    padding-top:18px;
    border-bottom:1px solid lightgrey;
    float:left;
    color:white;
}

div#menuitem2{
    width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);
    height:40px;
    background-color:#999999;
    background-image:url('Website/images/user999.png');
    background-repeat:no-repeat;
    background-position:center right;
    padding-top:18px;
    border-bottom:1px solid lightgrey;
    float:left;
    color:white;
}

div#menuitem3{
    width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);
    height:40px;
    background-color:#999999;
    background-image:url('Website/images/email999.png');
    background-repeat:no-repeat;
    background-position:center right;
    padding-top:18px;
    border-bottom:1px solid lightgrey;
    float:left;
    color:white;
}

div#menuitem4{
    width: -webkit-calc(100% - 10px);
    width:    -moz-calc(100% - 10px);
    width:         calc(100% - 10px);
    height:40px;
    background-color:#999999;
    padding-top:13px;
    float:left;
}

.search{
    width:70%;
    float:left;
}

.searchbutton{
    margin-left:10px;
    width: -webkit-calc(30% - 20px);
    width:    -moz-calc(30% - 20px);
    width:         calc(30% - 20px);
    background-image:url('Website/images/search.png');
    background-color:#666666;
    background-repeat:no-repeat;
    background-position:center center;
}

#searchbuttonid{
    background-color:#666666;
    border:1px solid #666666;
}

div#loggedon{
    width:100%;
    height:25px;
    color:white;
    background-color:#666666;
    padding-top:5px;
    //display:none;
}

div#account{
    width:100%;
    height:auto;
    min-height:38px;
    background-color:red;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}

div#accreg{
    width:33%;
    padding-top:10px;
    padding-bottom:10px;
    background-color:lightblue;
    float:left;
    color:white;
}

div#acclog{
    width:33%;
    padding-top:10px;
    padding-bottom:10px;
    background-color:blue;
    float:left;
    color:white;
}

div#accfor{
    width:33%;
    padding-top:10px;
    padding-bottom:10px;
    background-color:blue;
    float:left;
    color:white;
}

div#linkspacer{
    width:0.5%;
    height:40px;
    background-color:white;
    float:left;
}

div#register{
    height:auto;
    background-color:white;
    display:block;
    padding:10px;
}

div#login{
    height:auto;
    background-color:white;
    display:none;
    padding:10px;
}

div#forgotten{
    height:auto;
    background-color:white;
    display:none;
    padding:10px;
}

input{
    font-size:16px;
    width:100%;
    padding:10px;
    box-sizing:border-box;
    border:1px solid #ccc;
    border-radius:4px;
    background-color:#f8f8f8;
    resize:none;
}

input[type=text], input[type=email], input[type=password]{
    box-shadow:inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
    background-color:white;
}

input[type=submit]{
    background-color:#4CAF50;
    border:1px solid #4CAF50;
    color:white;
    padding:10px;
    text-decoration:none;
    cursor:pointer;
}

div#container{
    background-color:white;
}

div#head{
    width:100%;
    height:auto;
    background-color:red;
    padding:0px;
    color:white;
}

div#body{
    background-color:white;
    padding:10px;
    padding-top:30px;
    padding-bottom:30px;
}

div#foot{
    background-color:blue;
    padding:10px;
    color:white;
}
  • I'm using divs as buttons, not actual buttons....if that matters at all. – user4163554 May 29 '18 at 11:28
  • In fact, it's every first time I call one of the javascript functions that it happens (menu icon and the register/sign in/forgot button group) – user4163554 May 29 '18 at 11:30
  • Furthermore, is there anywhere I can check browser cross compatibility of my finished code? – user4163554 May 29 '18 at 11:34
  • I'm closing this question as off-topic because coding questions should be asked on stackoverflow.com. However, before you ask there you need to make your example minimal. Ideally it would be about 10 lines of code. You need to remove everything that isn't necessary to demonstrate the issue. – Stephen Ostermiller May 29 '18 at 11:38
  • Lol, I specifically chose here instead of stack overflow as I thought it was more for programming rather than web languages. Further, I agree with minimalising, but I really don't know where the problem lies....I also done it so someone, if needed, could run it themselves – user4163554 May 29 '18 at 11:42