The calculation of the numbers is correct but the way you are presenting them is not:
alert("Posição = " + i + ".\nValor = " + n[i]);
You are showing i as a position, which when for is already an element ahead of n and therefore no longer has the value you want. In addition, you are accessing n as if it were an array, when your array is called fib .
Correct would be:
alert("Posição = " + n + ".\nValor = " + fib[n]);
// ^-- ^---
See this change in action:
function calcularFibonacci() {
var i = 2;
var n = parseInt(document.getElementById("numFibonacci").value, 10);
var fib = new Array();
fib[0] = 0;
fib[1] = 1;
if(fib < 1)
alert("Valores menores que 1 não são permitidos.");
else{
for(i = 2; i <= n; i++){
fib[i] = fib[i - 2] + fib[i - 1];
}
alert("Posição = " + n + ".\nValor = " + fib[n]);
}
}
legend{
font-weight: bold;
}
input{
text-align: center;
}
div#site{
margin-top: 20px;
}
div#fibonacci{
width: 50%;
float: left;
}
div#vetor{
width: 50%;
float: right;
}
input#numFibonacci{
width: 60px;
margin-bottom: 5px;
}
input[name="inputVetor"]{
width: 45px;
margin-left: 5px;
margin-right: 5px;
}
button{
background-color: #999;;
margin-top: 5px;
border: #666;
color: white;
padding: 5px 11px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
-webkit-transition-duration: 0.7s; /* Safari */
transition-duration: 0.7s;
}
button[name="exibir"]{
margin-top: 5px;
}
button:hover{
background-color: #777;
}
<!DOCTYPE html>
<html>
<head>
<title>Exercicio com Arrays</title>
<meta charset="utf-8">
<script type="text/javascript" src="vetores.js"></script>
<script type="text/javascript" src="fibonacci.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid text-center">
<div id="site">
<div id="fibonacci">
<fieldset>
<legend>Sequência de Fibonacci</legend>
Limite Fibonacci: <input type="number" id="numFibonacci" min="1" value="1"><br>
<button id="buttonFibonacci" onClick="calcularFibonacci()">Exibir elemento na posição</button>
</fieldset>
</div>
<div id="vetor">
<fieldset>
<legend>Vetor</legend>
<input type="number" name="inputVetor" id="input0" value="0">
<input type="number" name="inputVetor" id="input1" value="0">
<input type="number" name="inputVetor" id="input2" value="0">
<input type="number" name="inputVetor" id="input3" value="0">
<input type="number" name="inputVetor" id="input4" value="0">
<input type="number" name="inputVetor" id="input5" value="0">
<input type="number" name="inputVetor" id="input6" value="0">
<input type="number" name="inputVetor" id="input7" value="0">
<input type="number" name="inputVetor" id="input8" value="0">
<input type="number" name="inputVetor" id="input9" value="0">
</fieldset>
<button name="exibir" onClick="calcularMaior()">Exibir MAIOR elemento</button>
<button name="exibir" onClick="calcularMenor()">Exibir MENOR elemento</button><br>
Último maior valor: <span id="lastMax"></span><br>
Último menor valor: <span id="lastMin"></span><br>
</div>
</div>
</div>
</body>
</html>
I'd like to remind you that parseInt will normally interpret on 10 basis unless the string of input is formatted as hexadecimal ( 0x... ) or as octal (number with leading zeros). For this reason it is very common to use parseInt without indicating radix.
