Javascript(0) along with external Javascript in HTML5

Question

I'm wondering if could anyone help me. I'm stuck with this code where my script toggles the button when I click it and when I click outside the toggled window, it'll disappear, after 2 hours of searching and testing out. I still can't figure it out. currently the script doesn't even work where the toggled menu doesn't even come out. When running external JSscript like the TopMenuScript.js it says referance error, function not defined ReferenceError: DropdownFunction is not defined

HTML5

<%@ Page Language="C#" AutoEventWireup="true"  CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
    #form1 {
        width: 1021px;
    }
    .TopPanel {}
    body,html{
        height:100%;
        width:100%;
        overflow:auto;
        margin:0;
        padding:0;
    }
    .TopBannerImage {
        background:url(../Images/topPanel_3croped.png) center;
        height:315px;
        min-width:100%;
        background-repeat:no-repeat;
    }
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
    <ul id="ul_Top">
        <li><a class ="active" href="#home">Home</a></li>
        <li style="float:right !important"><a href="#news">News</a></li>
        <li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="DropdownFunction()">Dropdown</a>
<div class="dropdown-content" id="MenuDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
        </li>
    </ul>
</div>
<div class="TopBannerImage">

</div>
<!--All Site Scripts -->
<!-- <script>

    function DropdownFunction() {
        document.getElementById("MenuDropdown").classList.toggle("show");
    }

    window.onclick = function (e) {
        if (!e.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var d = 0; d < dropdowns.length; d++) {
                var openDropdown = dropdowns[d];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

</script> -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
</body>

Javascript

 <script>

    function DropdownFunction() {
        document.getElementById("MenuDropdown").classList.toggle("show");
    }

    window.onclick = function (e) {
        if (!e.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var d = 0; d < dropdowns.length; d++) {
                var openDropdown = dropdowns[d];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

</script>

External Script link with the same script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="/JavaScript/TopMenuScript.js" ></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>

css

    .TopPanel
{
    border-style:ridge;
    border-width:2px;
    border-color:black;
    margin:auto;
    padding: 0px;
    text-align: center;
    background-size:cover;
    background-image url(../Images/background.jpg);
    background-repeat: no-repeat;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    height: 49px;
}
li{
    float:left;
}
li a, .dropbin {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}
li a, .dropdown:hover .dropbtn {
    background-color:black;
}
li.dropdown {
    display:inline-block;
}
.dropdown-content {
    display:none;
    position: absolute;
    background-color: #f9f9f9;
    min-width:160px;
    box-shadow : 0px 8px 16px 0px RGBA(0,0,0,0.2)
}
.dropdown-content a {
    color:black;
    padding:12px 16px;
    text-decoration: none;
    display:block;
}
.dropdown-content .dropdown-content {
    display:block;
}
body{margin:0;padding:0;}
.show {display:block;}

Answer 1

i've cleaned up and fixed everything for you. Ran it in visual studio 2015 and it works just fine, fixed your UI as well. Main cause of problem, Syntax errors and Spelling errors. you wanna make sure no syntax errors occurs in the javascript. one wrong synxtax and it'll cause it. i believe we're seeing errors that we're not seeing on your page. in coding it's case sensitive -continue coding regardless how much you fail as there's no end in learning

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial_Site.WebForm1" %>

Your HTML5 code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
    #form1 {
        width: 1021px;
    }
    .TopPanel {}
    body,html{
        height:100%;
        width:100%;
        overflow:auto;
        margin:0;
        padding:0;
    }
    .TopBannerImage {
        background:url(../Images/topPanel_3croped.png) center;
        height:315px;
        min-width:100%;
        background-repeat:no-repeat;
    }
</style>
<link href="CssFiles/MainPage.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>
<body style="background-color:#3F3939" class ="Test">
<div id="TopPanelMenuDiv" style="background-color:black;">
    <ul id="ul_Top">
        <li><a class ="active" href="#home">Home</a></li>
        <li style="float:right !important"><a href="#news">News</a></li>
        <li class ="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="DropdownFunction()">Dropdown</a>
<div class="dropdown-content" id="MenuDropdown">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
        </li>
    </ul>
</div>
<div class="TopBannerImage">

</div>
<!--All Site Scripts -->
<!-- <script>

    function DropdownFunction() {
        document.getElementById("MenuDropdown").classList.toggle("show");
    }

    window.onclick = function (e) {
        if (!e.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            for (var d = 0; d < dropdowns.length; d++) {
                var openDropdown = dropdowns[d];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

</script> -->
<script src="/JavaScript/jquery-3.1.1.min.js" ></script>
<script type ="text/javascript" src="JavaScript/TopMenuScript.js" ></script>
</body>
</html>

Your JavaScript Code

function DropdownFunction() {
    document.getElementById("MenuDropdown").classList.toggle("show");
}

window.onclick = function (e) {
    if (!e.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var d = 0; d < dropdowns.length; d++) {
            var openDropdown = dropdowns[d];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

Your css code

    .TopPanel
    {
    border-style:ridge;
    border-width:2px;
    border-color:black;
    margin:auto;
    padding: 0px;
    text-align: center;
    background-size:cover;
    background-image url(../Images/background.jpg);
    background-repeat: no-repeat;

    }
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 49px;
    }
    li{
    float:left;
}
    li a, .dropbin {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;

}
    li a, .dropdown:hover .dropbtn {
    background-color:black;
}
    li.dropdown {
    display:inline-block;
}
    .dropdown-content {
    display:none;
    position: absolute;
    background-color: #f9f9f9;
    min-width:160px;
    box-shadow : 0px 8px 16px 0px rgba(0,0,0,0.2)
}
    .dropdown-content a {
    color:white;
    padding:12px 16px;
    text-decoration: none;
    display:block;
    text-align:left;
}
    .dropdown-content .dropdown-content {
    display:block;
}
    body{margin:0;padding:0;}
    .dropdown-content a:hover {background-color:#f1f1f1}
    .show {display:block;}


    #BannerImage {
    background-image: url('/Images/topPanel_3croped.png');
    width:100%;
    height:100%;
    background-repeat:no-repeat;
}

    #my-div{
    margin-left:auto;
    margin-right:auto;
}

Javascript(0) along with external Javascript in HTML5

Question

1 answers

solution1
-1 ACCPTED 2016-10-16 13:13:24

Javascript(0) along with external Javascript in HTML5

Question

1 answers

solution1 -1 ACCPTED 2016-10-16 13:13:24

solution1
-1 ACCPTED 2016-10-16 13:13:24