Placement du JS

Chers confères,
Mais connaissance en JS sont NULL, je demande votre indulgence.
Je sais que idéalement les fonctions JS doivent être placées dans le head de la page entre les balises

<script type="text/javascript">
</script>

J'ai trouvé une fonction très pratiques pour mettre à jour un prix en cliquant sur un input de type number. Si je place ma fonction dans le head, elle ne fonctionne pas. Pour qu'elle marche je dois la place dans le body après ma div ou à la fin de la page après le </body>
Pourquoi ne fonctionne n'est elle pas dans le head, comment faire pour que ça marche
la voici

function getElementsByAttribute(attribute, name)
{
    var matchingElements = [];
    var allElements = document.getElementsByTagName('*');
    for (var i = 0; i < allElements.length; i++)
        {
        if (allElements[i].getAttribute(attribute)===name)
        {
            matchingElements.push(allElements[i]);
        }
    }
    return matchingElements;
}

//fonction de mise à jour du total
function updateTotal() {
    var total = 0,
        tempEl, quantity, unitPrice, i, elemNumber;
 
    for(i = 1, elemNumber = document.getElementsByClassName("place").length; i <= elemNumber; i++) {   
        tempEl = getElementsByAttribute("name","item_number_"+i)[0];
        quantity = tempEl.value;
        tempEl = getElementsByAttribute("name","amount_"+i)[0];
        unitPrice = tempEl.value;
         
        total += quantity*unitPrice;
    }
     
    tempEl = document.getElementById("total");
    tempEl.innerHTML = "<p>Total: $"+total+"</p>"
};
 
var tempEl, i, elemNumber;
 
for(i = 1, elemNumber = document.getElementsByClassName("place").length; i <= elemNumber; i++) {   
    tempEl = getElementsByAttribute("name","item_number_"+i)[0];
    tempEl.addEventListener("change", updateTotal, false);
}

merci de votre aide



Bien PHPment et MySQLment
Delaville