Javascript-форум - Я новичок в js, помогите, не работает код

Пожалуйста помогите.
1. Не работает кнопка случайного вывода координат.
2. Карты не хотят появляться в случайной позиции на экране. (они выводятся рандомно, а еще должны выводится рандомно в рандомной позиции)
Подскажите новичку пожалуйста)

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title> 
<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> 
<style type="text/css"> 
#cards { 
width: 1300px; 
min-height: 150px; 
float: left; 
} 
#cards > div{ 
display: none; 
background: url('cards.png'); 
background-repeat: no-repeat; 
float: left; 
height: 143px; 
width: 100px; 
} 
#form { 
width: 100%; 
float:left; 
margin-top: 50px; 
} 
#form > div { 
float: left; 
display: block; 
width: 100%; 
} 

#rectangle { 
position: absolute; 
right: 0; 
top: 0; 
width: 100px; 
height: 100px; 
background-color: lightgreen; 
} 
</style> 
</head> 
<body> 
<div id="cards"></div> 
<div id="rectangle"></div> 
<div> 
<form id="form"> 

<label>Масть</label> 
<select name="type"> 
<option value="0"> Креста </option> 
<option value="1"> Бубна </option> 
<option value="2"> Чирва </option> 
<option value="3"> Пика </option> 
</select> 

<label>Значення</label> 
<select name="value"> 
<option value="1"> 2 </option> 
<option value="2"> 3 </option> 
<option value="3"> 4 </option> 
<option value="4"> 5 </option> 
<option value="5"> 6 </option> 
<option value="6"> 7 </option> 
<option value="7"> 8 </option> 
<option value="8"> 9 </option> 
<option value="9"> 10 </option> 
<option value="10"> Валет </option> 
<option value="11"> Дама </option> 
<option value="12"> Король </option> 
<option value="0"> Туз </option> 
</select> 

<input type="submit"> 

<input id="getElementPosition" type="submit" value="Случайные координаты">
</form> 
</div> 



<script> 
var cardsQTY = 55, 
field = document.getElementById('cards'), 
cards = '', 
counterRow = 0, 
counterCol = 0; 

for (var i=0; i < cardsQTY; i++) { 
cards += '<div data-number="'+i+'" data-col="'+ counterCol +'" data-row ="'+ counterRow +'" style="background-position-x: -' + counterRow * 98 + 'px;background-position-y: -' + counterCol * 143 + 'px"></div>'; 
counterRow ++; 

if (counterRow === 13) { 
counterRow = 0; 
counterCol++; 
} 
} 

function getRandomInt(min, max) { 
return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

field.innerHTML = cards; 

document.querySelectorAll("[data-number='" + getRandomInt(0,cardsQTY) +"']")[0].style.display = 'block'; 

var form = document.getElementById("form"), 
nodes = document.getElementById('cards').childNodes, 
rectangle = document.getElementById('rectangle'); 

form.addEventListener("submit", function(e){ 
e.preventDefault(); 

var topCoords = form.elements['top'].value, 
leftCoords = form.elements['left'].value, 
type = form.elements['type'].value, 
value = form.elements['value'].value, 
el = document.querySelectorAll("[data-col='"+ type +"'][data-row='"+value+"']")[0]; 


for(var i=0; i<nodes.length; i++) { 
if (nodes[i].nodeName.toLowerCase() == 'div') { 
nodes[i].style.display = 'none'; 
} 
} 
css = { 
display: 'block', 
position: 'absolute', 
top: topCoords + 'px', 
left: leftCoords + 'px' 
}; 

for(i in css){ 
el.style[i] = css[i]; 
} 
}); 
for(var i=0; i<nodes.length; i++) { 
nodes[i].onmouseover = function (argument) { 
rectangle.style.background = 'red'; 
}; 
nodes[i].onmouseout = function (argument) { 
rectangle.style.background = 'lightgreen'; 
}; 
} 

function getElementPosition(elemId)
{
    var elem = document.getElementById(elemId);
    
    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
    
    var l = 0;
    var t = 0;
    
    while (elem)
    {
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return {"left":l, "top":t, "width": w, "height":h};
}
</script> 
</body> 
</html>