JavaScript/HTML div creation error

Question

I am trying to make a basic sensor pad for HTML (JavaScript), which creates 500 small divs which then turn red on mouse hover. However, when I tried it, nothing was created

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

Your problem cries out for a fiddle. Here you go: http://jsfiddle.net/sQdz6/ — Carth, Dec 06 '13 at 18:29
Side note, your HTML in invalid and there's no real point in specifying fractional pixel values since the browser will just round it. — j08691, Dec 06 '13 at 18:32

score 3 · Answer 1 · answered Dec 06 '13 at 18:25

3

You're missing

document.body.appendChild(pad);

answered Dec 06 '13 at 18:25

JCleveland

337
3
16

score 3 · Answer 2 · answered Dec 06 '13 at 18:26

First the code will not run because of the way you added the JavaScript

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

you can not have code inside and a src

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

McAden · Accepted Answer · 2013-12-06T18:34:47.000

2

First, you need to use separate script tags - one for the external reference and another for the onload.

As for the divs, you're creating them but you're not adding them to the 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++;
}

EDIT: Addressing Teemu's concern you might simply want to use CSS for that hover instead so:

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

edited Dec 06 '13 at 18:34

answered Dec 06 '13 at 18:28

McAden

13,714
5
37
63

"`pad.onmousehover`", seriously? – Teemu Dec 06 '13 at 18:30
The hover wasn't the OP's question and is a part of his code. Separate issue. – McAden Dec 06 '13 at 18:32
A _good_ answer should provide a **working** solution, nevertheless what is the OP's code, IMHO. Though Eric's answer is needed for even to execute the code. Anyway, +1 after update. – Teemu Dec 06 '13 at 20:42

JavaScript/HTML div creation error

3 Answers3