链接CSS、Javascript和HTML进程失败

因此，根据我在这里得到的建议，我尝试这样实现它：

我创建了以下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);
    }
)();

然后我创建了以下样式表，称为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;
}

然后，我尝试构建一个简单的HTML文件来检查结果，称为keyboard-rendering.htm

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

我的问题是，为什么这不起作用（输出为"），也就是说，为什么它不给我与右下象限相同的输出。

也许可以这样做：

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

在页面末尾调用脚本。因为您的脚本找不到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);
};

您最直接的错误是加载.js文件后，'display'被放在页面上。

当浏览器下载.js文件时，它会在下载完成后立即运行中的内容。

这意味着，当加载键盘代码时，它甚至在<div>存在之前就已经设置好了。

如果你正在设置以后可以启动的功能，那就太好了。但是.js文件底部的代码，即(function () {}());内部的内容，被设置为立即启动。它正在寻找<div>，但找不到它。

将.js文件移到其他文件的下方。

请将脚本放在页面末尾，然后它将正常工作

链接JS

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

请将您的js-include放在底部。


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

您应该将脚本代码放在div元素后面的body标记中，如下所示：

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

它将工作：）

相关内容

最新更新

热门标签：