Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

    #d1 {
        height:16px;
        width:6px;
        float: left;
        background-color:white;
        border: 2px solid #aeaeae;
        }

    #d2 {
    height: 20px;
    width: 20px;
    float: left;
    background-color: #F00;
    }

    #d3 {
        height:20px;
        width:30px;
        float: left;
        background-color:#00FF00;
    }

    #d4 {
        height:20px;
        width:40px;
        float: left;
        background-color:#FF05E6;
    }
    #d5 {
        height:20px;
        width:50px;
        float: left;
        background-color:yellow;
    }
    #d6 {
        height:20px;
        width:60px;
        float: left;
        background-color:#076D00;
    }

    #d7 {
        height:20px;
        width:70px;
        float: left;
        background-color:black;
    }

    #d8 {
        height:20px;
        width:80px;
        float: left;
        background-color:#9E6306;
    }

    #d9 {
        height:20px;
        width:90px;
        float: left;
        background-color:blue;
    }

    #d10 {
        height:20px;
        width:100px;
        float: left;
        background-color:orange;
    }


}
</style>
<script>

var suma=0;
var aux=0;
//Variable global con el nodo de la capa seleccionada
var capaFoco;

function cogerFoco(capa){
    capaFoco=capa;
    document.getElementById("texto").innerHTML=capa.innerHTML;
    suma=document.getElementById("texto").innerHTML;

}
//Crear un nodo igual a la capa seleccionada
function crear(){
    //Crear una copia de la capafoco
    var nuevacapa = capaFoco.cloneNode(true);

    //Asignar a la capa padre el nuevo hijo
    document.getElementById("padre").appendChild(nuevacapa);


    //Suma a resultado el valor de la capa añadida a linea

    document.getElementById("resultado").innerHTML+=suma;
    console.log("Suma : " + suma);

}
</script>
</head>

<body>


<div id="d1" onclick="cogerFoco(this)">1</div>
<p>&nbsp;</p>
<div id="d2" onclick="cogerFoco(this)">2</div><br />
<div id="d3" onclick="cogerFoco(this)">3</div><br />
<div id="d4" onclick="cogerFoco(this)">4</div><br />
<div id="d5" onclick="cogerFoco(this)">5</div><br />
<div id="d6" onclick="cogerFoco(this)">6</div><br />
<div id="d7" onclick="cogerFoco(this)">7</div><br />
<div id="d8" onclick="cogerFoco(this)">8</div><br />
<div id="d9" onclick="cogerFoco(this)">9</div><br />
<div id="d10" onclick="cogerFoco(this)">10</div><br /><br /><br />
<div id="texto"> </div>
<p>Primero selecciona en la parte superior el color que quieres añadir y después pulsa el botón SUMA para añadirlo a linea resultado .</p>
<button onClick="crear()">SUMA</button><br>
<br />
Resultado: <span id="resultado">0</span><br>

            <div id="padre">

            </div>
</body>
</html>