0

そこで、ここで得たアドバイスを使用して、次のように実装しようとしました。

  1. 次のkbd.jsファイルを作成しました。

    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);
    }
)();

  2. 次に、次のスタイルシートを作成しました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;
}​

  3. 次に、結果を確認するための簡単なHTMLファイルを作成してみました。keyboard-rendering.htm

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

私の質問は、なぜこれが機能しないのか（出力は「​」）、つまり、ここで右下の象限と同じ出力が得られないのはなぜかということです。

4

6 に答える 6

1

ページの最後でスクリプトを呼び出します。スクリプトがID「display」の要素を見つけられないためです。

これを変える

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

に

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

または、kbd.jsの関数を変更するよりも最初にスクリプトファイルを含めたい場合

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

に

window.onload = function() {
    var keys = [ 'Ctrl+X','Y','Z'];   
    var elem = document.getElementById('display');
    fnRenderKBD(elem, keys);
};
于 2012-08-27T08:31:16.090 に答える
1

最も直接的なエラーは、.jsファイルがロードされた後'display'にページに配置されることです。

ブラウザが.jsファイルをダウンロードすると、ダウンロードが終了するとすぐにコンテンツが実行されます。

つまり、キーボードコードが読み込まれると、<div>偶数が存在する前に設定されます。

後で起動できる関数を設定する場合は、それで問題ありません。しかし、.jsファイルの下部にあるコードでは、内部のものが(function () {}());すぐに起動するように設定されています。それは探しています、<div>そしてそれはそれを見つけるつもりはありません。

.jsファイルを他のすべての下に移動します。

于 2012-08-27T08:32:12.093 に答える
1

多分これに従ってください：

window.onload = function() {

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

    fnRenderKBD(elem, keys);
};

ページの文字セットを確認します。

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
于 2012-08-27T08:44:42.910 に答える
0

スクリプトをページの最後に配置してください。そうすれば、正しく機能します。

LINK JS 

<script type="text/javascript" src="kbd.js"> </script>
于 2012-08-27T08:36:17.820 に答える
0

下部にjsインクルードを入れてください。


<LINK REL=StyleSheet HREF="kbd.css" TYPE="text/css">
<div id="display"></div>
<script src="kbd.js"> </script>
于 2012-08-27T08:40:18.500 に答える
0

次のように、スクリプトコードをdiv要素の後のbo​​dyタグに配置する必要があります。

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

それが動作します ：）

于 2012-08-27T08:58:25.650 に答える