Including js and css not working
Question
I am trying out this simple css and js password strength checker. It works very nicely when the css and js is included in the file as below. If I put the js in a seperate file however and include it in this file it will not work. Also if I put the css in an external css file it wont style the page.
To include it I was simply putting:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/js.js"></script>
I dont see what Im doing wrong or is it to do with the code and it needs to be in the same file for some reason?
the file is a php file because I will later be adding php to it but that doesnt change anything does it?
<html>
<head>
<title>strength check</title>
<style type="text/css">
#passwordStrength {
height:10px;
display:block;
float:left;
}
.strength0 {
width:150px;
background:#cccccc;
}
.strength1 {
width:20px;
background:#ff0000;
}
.strength2 {
width:40px;
background:#ff5f5f;
}
.strength3 {
width:60px;
background:#56e500;
}
.strength4 {
background:#4dcd00;
width:80px;
}
.strength5 {
background:#399800;
width:150px;
}
</style>
<script language="javascript" type="text/javascript">
function passwordStrength(password) {
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
<input type="password" caption="password" name="password" onkeyup="passwordStrength(this.value);" size="60">
<div style="font-size: 10px"; id="passwordDescription">Password Strength</div>
<div class="strength0" id="passwordStrength"></div>
</body>
</html>
4 answers
solution1
3 ACCPTED 2012-07-05 12:48:13
Remove the / at the begining of your links :
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/js.js"></script>
Those / mean your files are at the root of your domain.
solution2
0 2012-07-05 12:46:47
- Do whatever you tried again.
- Open the page in firefox.
- View Source
- In the source page, you can see you scripts and css files as a links.
- Click the link. it will show page cannot be displayed.
In that case, your include location is wrong!
Place the css and js in the correct place, until the step 5 shows you some thing other than page cannot be displayed
solution3
0 2012-07-05 12:48:03
I do not know what server you are using, but if you are working with Tomcat you need to lose the leading slash of the source path.
Try:
css/style.css
instead of
/css/style.css
solution4
0 2012-07-05 12:50:09
Try to set the paths without the starting slashes – if you have everything in a sub directory of your server, then the slashes might break the path.
<link rel="stylesheet" href="css/style.css" />
<script src="js/js.js"></script>
In HTML5 you can also get rid of the type attributes (just in case you use a HTML5 doctype).
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.