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>

How are you including the js file? It might be worth showing this as well — daz-fuller
– daz-fuller, Commented Jul 5, 2012 at 12:46

Denys Séguret · Accepted Answer · 2012-07-05 12:48:13Z

3

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.

answered Jul 5, 2012 at 12:48

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cohen Over a year ago

Oh right thanks. I thought that just meant that it was down a directory.

Amberlamps Over a year ago

Use ../ to go down a directory!

madhairsilence · Accepted Answer · 2012-07-05 12:46:47Z

0

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

answered Jul 5, 2012 at 12:46

madhairsilence

3,8904 gold badges42 silver badges83 bronze badges

Comments

Amberlamps · Accepted Answer · 2012-07-05 12:48:03Z

0

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

answered Jul 5, 2012 at 12:48

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

Comments

harryfk · Accepted Answer · 2012-07-05 12:50:09Z

0

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).

answered Jul 5, 2012 at 12:50

harryfk

433 bronze badges

Collectives™ on Stack Overflow

Including js and css not working

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related