CODEWITHSUNDEEP
javascriptcsshtml
user2976089
user2976089

Reputation: 355

JavaScript/HTML div creation error

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

Upvotes: 0

Views: 68

Answers (3)

McAden
McAden

Reputation: 13970

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

Upvotes: 2

epascarello
epascarello

Reputation: 207527

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>

Upvotes: 3

JCleveland
JCleveland

Reputation: 337

You're missing

document.body.appendChild(pad);

Upvotes: 3

Related Questions