Question

我正在尝试为HTML（JavaScript）创建一个基本的传感器板，它会创建500个小div s，然后在鼠标悬停时变为红色。但是，当我尝试它时，没有创建任何东西

example.html的

<!DOCTYPE html>
<html>
<head>
<title>SensorPad Test</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script type="text/javascript" src="SensorPad.js">
window.onload = createSensor;
</script>
</head>
</html>

styles.css的

.sPad{
    width: 0.4px;
    height: 0.4px;
    background-color: #EEE;
    border: 0.1px solid #000;
}
.uPad{
    background-color: #F00;
}

SensorPad.js

var sPos;
var count = 1;
function createSensor(){
    for(var i = 0; i < 500; ++i){
        var pad = document.createElement('div');
        pad.className = 'sPad';
        pad.id = 'pad' + count.toString();
        pad.onmousehover = function(){sPos = parseInt(pad.id); clearPads(); pad.className = 'uPad';};
        count++;
    }
}
function clearPads(){
    for(var i = 1; i <= count; ++i){
        var n = 'pad' + i.toString();
        var p = document.getElementById(n);
        p.className = 'sPad';
    }
}

Answer 1

你错过了

document.body.appendChild(pad);

Answer 2

首先，由于您添加JavaScript

的方式，代码将无法运行

<script type="text/javascript" src="SensorPad.js">
window.onload = createSensor;
</script>

你不能拥有代码和src

<script type="text/javascript" src="SensorPad.js"></src>    
<script type="text/javascript"
    window.onload = createSensor;
</script>

Answer 3

首先，您需要使用单独的script标记 - 一个用于外部参考，另一个用于onload。

至于div，你正在创建它们，但你没有将它们添加到DOM中。

for(var i = 0; i < 500; ++i){
    var pad = document.createElement('div');
    pad.className = 'sPad';
    pad.id = 'pad' + count.toString();
    pad.onmousehover = function(){sPos = parseInt(pad.id); clearPads(); pad.className = 'uPad';};
    document.body.appendChild(pad)
    count++;
}

编辑：解决Teemu的问题，您可能只想将CSS用于悬停，所以：

for(var i = 0; i < 500; ++i){
    var pad = document.createElement('div');
    pad.className = 'sPad';
    pad.id = 'pad' + i.toString();
    document.body.appendChild(pad)
}

CSS

.sPad{
    width: 0.4px;
    height: 0.4px;
    background-color: #EEE;
    border: 0.1px solid #000;
}
.sPad:hover{
    background-color: #F00;
}

JavaScript / HTML div创建错误

3 个答案: