Bug Calculatrice (carré ²) en JS

Bonjour à tous !
Je suis en IUT Informatique et en cours Web, on nous a demandé de créer une calculatrice de base, ce que j'ai fait et qui fonctionne super bien !! Vous allez me demander où est le problème !
C'est que j'ai voulu ajouter le CARRE (²) ! Et depuis je ne sais pas ou ça bug, mais ça passe pas ^^

Voici la page de la calculette :
Code : HTML

<h2 align="center" onmouseover="this.style.color='grey'" onmouseout="this.style.color='black'">Calculatrice</h2>

<table id="calculatrice" align="center">
<tr>
<td colspan="4"><input type="text" name="zoneCalcul" id="zoneCalcul" value="" /></td>
</tr>

<tr>
<td><button name="-" onclick="envoi(this.name)" accesskey="-">-</button></td>
<td><button name="+" onclick="envoi(this.name)" accesskey="+">+</button></td>
<td><button name="*" onclick="envoi(this.name)" accesskey="*">*</button></td>
<td><button name="/" onclick="envoi(this.name)" accesskey="/">/</button></td>
</tr>

<tr>
<td><button name="7" onclick="envoi(this.name)" accesskey="7">7</button></td>
<td><button name="8" onclick="envoi(this.name)" accesskey="8">8</button></td>
<td><button name="9" onclick="envoi(this.name)" accesskey="9">9</button></td>
<td><button name="²" onclick="envoi(this.name)" accesskey="²">²</button></td>
</tr>

<tr>
<td><button name="4" onclick="envoi(this.name)" accesskey="4">4</button></td>
<td><button name="5" onclick="envoi(this.name)" accesskey="5">5</button></td>
<td><button name="6" onclick="envoi(this.name)" accesskey="6">6</button></td>
</tr>

<tr>
<td><button name="1" onclick="envoi(this.name)" accesskey="1">1</button></td>
<td><button name="2" onclick="envoi(this.name)" accesskey="2">2</button></td>
<td><button name="3" onclick="envoi(this.name)" accesskey="3">3</button></td>
</tr>

<tr>
<td><button name="0" onclick="envoi(this.name)" accesskey="0">0</button></td>
<td><button name="." onclick="envoi(this.name)" accesskey=".">,</button></td>
<td colspan="2"><button name="calcul" onclick="calculer()">Entrer</button></td>
</tr>

<tr>
<td colspan="1"><button name="reset1" onclick="enlevCarFin()">C</button></td>
<td colspan="2"><button name="reset" onclick="document.getElementById('zoneCalcul').value = ''">AC</button></td>
</tr>
</table>



Jusque là rien de grave !!
Mais voici mes fonctions JS :
Code : JavaScript
function calculer()
{
var val;
//Pour le carré
var x;
var i;
var z;
var nombre;
var valFin;

//ON RECHERCHE LES CARRES
x = document.getElementById('zoneCalcul').value.length;

valFin = "";
i=x;

if(x == 0)
{
document.getElementById('zoneCalcul').value = "Aucunes valeurs...";
}
else
{
while(i >= 0)
{
if(document.getElementById('zoneCalcul').value.slice(i, i) == '²')
{
i--;
}

else
{
if (document.getElementById('zoneCalcul').value.slice(i+1, i+1) == '²')
{
z = i;

nombre = "";

while(document.getElementById('zoneCalcul').value.slice(z, z) != '+' && document.getElementById('zoneCalcul').value.slice(z, z) != '-' && document.getElementById('zoneCalcul').value.slice(z, z) != '*' && document.getElementById('zoneCalcul').value.slice(z, z) != '/')
{
nombre = document.getElementById('zoneCalcul').value.slice(z, z) + nombre;
z--;

}

nombre = nombre * nombre;
valfin = nombre + valfin;

i = z;
}
else
{
valFin = document.getElementById('zoneCalcul').value.slice(i, i) + valFin;
i--;
}
}
}
}

document.getElementById('zoneCalcul').value = eval(valFin);
}

function enlevCarFin()
{
var x;

x = document.getElementById('zoneCalcul').value.length;
document.getElementById('zoneCalcul').value = document.getElementById('zoneCalcul').value.slice(0, x-1);
}

C'est dans la fonction calculer() qu'il y a un soucis ! Je ne comprend pas bien le soucis ! J'ai pourtant fait une trace et des essais et ça bug toujours...

Merci de votre aide !