Linking CSS, Javascript and HTML process fail

Question

So using the advice I got here, I tried to implement it like this:

I created the following kbd.js file:

function fnRenderKBD(elem, keysToDisplay)
{
    var delimiter = '';
    var content = '';
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
        delimiter = '+';
    }
    elem.innerHTML = content;
}
(function() {
        var keys = [ 'Ctrl+X','Y','Z'];   
        var elem = document.getElementById('display');
        fnRenderKBD(elem, keys);
    }
)();

Then I created the following stylesheet, called kbd.css:

kbd {
    padding: 0.1em 0.6em;
    border: 1px solid #CCC;
    font-size: 11px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #F7F7F7;
    color: #333;
    -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 0.1em;
    text-shadow: 0 1px 0 white;
    line-height: 1.4;
    white-space: nowrap;
}

Then, I tried to construct a simple HTML file to check the results, called keyboard-rendering.htm

<script src="kbd.js"> </script>
<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">
<div id="display"></div>

My question is, why does this not work (output is "â€‹"), that is, why does it not give me the same output as the lower right quadrant here.

you have typos in your code (as highlighted) - unclosed string literals — Oleg
– Oleg, Commented Aug 27, 2012 at 8:26
Right, so I have made the changes from your edit, however, I still get the same output... — tchakravarty
– tchakravarty, Commented Aug 27, 2012 at 8:29

user1440118 · Accepted Answer · 2012-08-27 08:44:42Z

1

Maybe follow this:

window.onload = function() {

    var keys = [ 'Ctrl+X','Y','Z'];   
    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
};

and check your page's charset:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

answered Aug 27, 2012 at 8:44

user1440118

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

7 Comments

tchakravarty Over a year ago

Ok, so I am pretty sure that there are non-ASCII characters hiding in my HTML document somewhere, but I can't find them. I added the meta line you suggested to the top of my HTML file, but I still get the "â€‹" character. How can I remove this?

user1440118 Over a year ago

So let's change '<kbd>' in '<span>' in js function just for try. Have you still the same problem? At last try changing 'elem.innerHTML' in 'elem.outerHTML'. 'outerHTML' sets the source code including the opening and closing tags of the element without formatting.

tchakravarty Over a year ago

Thanks. I tried both the things you suggested: 1) Changed the tags from kbd to span, and; 2) changed innerHTML to outerHTML. I still get the weird output...

user1440118 Over a year ago

Do you get "â€‹" in place of kbd or inside?

tchakravarty Over a year ago

I get the correct output, surrounded by the characters: â€‹ Ctrl+X+Y+Z â€‹

|

Yograj Gupta · Accepted Answer · 2012-08-27 08:31:16Z

Call your script at the end of the page. because your script not finding element with id "display".

Change this

<script src="kbd.js"> </script>
<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">
<div id="display"></div>

to

<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">
<div id="display"></div>
<script src="kbd.js"> </script>

or, if you want to include your script file first than change function in kbd.js

(function() {
        var keys = [ 'Ctrl+X','Y','Z'];   
        var elem = document.getElementById('display');
        fnRenderKBD(elem, keys);
    }
)();

to

window.onload = function() {
    var keys = [ 'Ctrl+X','Y','Z'];   
    var elem = document.getElementById('display');
    fnRenderKBD(elem, keys);
};

LetterEh · Accepted Answer · 2012-08-27 08:32:12Z

1

Your most-immediate error is that 'display' is put on the page after the .js file is loaded.

When a browser downloads a .js file, it runs the contents inside AS SOON AS THE DOWNLOAD IS FINISHED.

That means that when your keyboard code is loaded, it's setting up before the <div> even exists.

That would be fine, if you were setting up functions that you could fire later on. But the code at the bottom of the .js file, the stuff inside of the (function () {}()); is set to fire right away. It's looking for <div> and it's not going to find it.

Move the .js file to be below everything else.

answered Aug 27, 2012 at 8:32

LetterEh

26.8k5 gold badges45 silver badges52 bronze badges

Comments

Codegiant · Accepted Answer · 2012-08-27 08:36:17Z

0

Please put your script at the end of your page and then it will work properly

LINK JS

<script type="text/javascript" src="kbd.js"> </script>

answered Aug 27, 2012 at 8:36

Codegiant

2,1501 gold badge22 silver badges31 bronze badges

Comments

sushil bharwani · Accepted Answer · 2012-08-27 08:40:18Z

0

Please bring your js include in the bottom.


<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">
<div id="display"></div>
<script src="kbd.js"> </script>

answered Aug 27, 2012 at 8:40

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

Comments

Abd Al-Rahman · Accepted Answer · 2012-08-27 08:58:25Z

0

you should put your script code in the body tag after div element, like this:

<body>

<div id="display"></div>
<script>
function fnRenderKBD(elem, keysToDisplay)
{
    var delimiter = '';
    var content = '';
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
        delimiter = '+';
    }

    elem.innerHTML = content;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById("display");
    fnRenderKBD(elem, keys);
})();
</script>

</body>

it will work :)

answered Aug 27, 2012 at 8:58

Abd Al-Rahman

377 bronze badges

Collectives™ on Stack Overflow

Linking CSS, Javascript and HTML process fail

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related