Script stops working when I insert into another script
Question
I have a problem that is killing me right now because I can't see why it isn't working. I have made a script in one file that works, but when I copy/paste it into the file that I want it to work in, it doesn't work. Here's the script I just made:
<html>
<body>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
</body>
</html>
Here it works, but when I insert it into the file that it was meant for it won't work. Here it is:
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p><h2>Log ind</h2>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required><br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required><br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font><br>
<a href="index.php"><i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i></a>
</div>
</li>
</div>
</div>
<?php include_once "footer.php"; ?>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
</body>
</html>
What the script, I am inserting, does is to detect if #Hello is in the URL and if it is, it has to display some text... But it won't work.
Anybody who has an idea about what I could be doing wrong?
2 answers
solution1
0 2017-07-03 23:46:06
your code will only run once when your page document first time load, if you do want to check the hash every time its changed, it is better to put in a change callback. please also be sure you jQuery relative path is right.
$(function() { // ensure you will execute script after document loaded
$(window).on('hashchange', function() { // put you code in side change callback.
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
<html> <head> <title>...</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all"> <link rel="shortcut icon" href="images/favicon.ico"> </head> <body id="top"> <div id="forside"></div> <div class="bgded overlay" style="background-image:url('images/stor_1.png');"> <div id="pageintro" class="hoc clear"> <li> <p></p> <h2>Log ind</h2> <p id="myElement"></p> <script> </script> <div id="comments"> <font color="black"> <form action="proces.php" method="post"> <input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required> <br> <input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required> <br> <input type="submit" name="submit" value="Log Ind!"> </form> </font> <br> <a href="index.php"><i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i></a> </div> </li> </div> </div> <a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a> <script src="layout/scripts/jquery.min.js"></script> <script src="layout/scripts/jquery.mobilemenu.js"></script> <script type="text/javascript"> $(function() { $(window).on('hashchange', function() { if (window.location.hash == "#hello") { document.getElementById("myElement").innerHTML = 'Vi har Hello'; } else { document.getElementById("myElement").innerHTML = ''; } }); }); </script> </body> </html>
solution2
0 2017-07-04 04:45:57
try adding these
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
at the top in the head section
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.