JS - Calculo não mostra resultado

esse é onde o cara digita as informações

<div class="col-6">
<div>
<font color="white"><h2>Digite seu NICK:</h2> </font>
<input type="text" class="div1" id="nick" name="nick" size="50%" maxlength="50%"/>
<font color="white"><h2>Seu elow:(bronze, prata, ouro, diamante, mestre, challenger)</h2> </font>
<input type="text" class="div1" id="elow" name="elow" size="50%" maxlength="50%"/>
<font color="white"><h2>Total de vitórias:</h2> </font>
<input type="text" class="div1" id="vito" name="vito" size="50%" maxlength="50%"/>
<font color="white"><h2>Total de derrotas:</h2> </font>
<input type="text" class="div1" id="der" name="der" size="50%" maxlength="50%"/>
</br>
</br>
<button onclick="mmr()"> <img src="image/button.png"> </button>
</br>
<font color="#00cbdd"><h2> Seu MRR:</h2> </font>
<p><span id id="resultado" name="resultado"></span></p>

</div>
</div>

Esse é o JS não sei o que estou fazendo de errado...

<script type="text/javascript">
function mmr(){
var nick = (document.getElementById("nick").value;
var elow = (document.getElementById("elow").value;
var vito = parseInt(document.getElementById("vito").value);
var der = parseInt(document.getElementById("der").value);
var elowfinal = 0;
var calc;
var result = " ";

case "bronze": elowfinal = 400;
break;

case "prata": elowfinal = 700;
break;

case "ouro": elowfinal = 1000;
break;

case "platina": elowfinal = 1300;
break;

case "diamante": elowfinal = 1650;
break;

case "Mestre": elowfinal = 2000;
break;

case "challenger": elowfinal = 2400;
break;
}
calc = (vito-der)*2;
calc = calc + elowfinal;
reult = nick + "Seu MMR é:" + calc;
document.getElementById("resultado").innerHTML = result;
}
</script>