Question

JavaScript/HTML div 创建错误

2013-12-06

68

javascript css html

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

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

JCleveland

2013-12-06

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