PROJETINHO INCIANTE EM JS | Lógica de programação | Alura

Nestas linhas construí um código onde incialmente onde declarei as variáveis usando "LET" nas tres primeiras linhas. O código não funcionou, Em seguida, retirei esse termo e o código funcionou. Poderiam me dizer pq a primeira ocorrência falhou? A seguir é possível observar as duas situações. Enviei tbm o html e o css para ajudar no entendimento de minha questão.

1a situação

function calcular(n1, n2) {
    
   let n1 = parseFloat(document.getElementById("n1").value);
   let n2 = parseFloat(document.getElementById("n2").value);
   let selector = document.getElementById("selector").value;

    

    switch (selector) {
        case "+":
        calculo = (n1 + n2);
        document.getElementById("resultado").innerHTML = `o resultado da soma de ${n1}+${n2} é = ${calculo}`
        break
    }

    switch (selector) {
        case "-":
        calculo = (n1 - n2);
        document.getElementById("resultado").innerHTML = `o resultado da subtração de ${n1}-${n2} é = ${calculo}`
        break
    }

    switch (selector) {
        case "/":
            calculo = Math.round((n1 / n2));
            if (Number.isNaN(calculo)) {
                document.getElementById("resultado").innerHTML = "Insira um divisível válido"
            } else {
                document.getElementById("resultado").innerHTML = `o resultado da divisão de ${n1}/${n2} é = ${calculo}`
                break
            }
    }
    
    switch (selector) {
         case "*":
            calculo = Math.round((n1*n2));
            
            document.getElementById("resultado").innerHTML = `o resultado da multiplicação de ${n1}*${n2} é = ${calculo}`
             break
            
        }
 }

2a situação

function calcular(n1,n2) {
    
   n1 = parseFloat(document.getElementById("n1").value);
   n2 = parseFloat(document.getElementById("n2").value);
   selector = document.getElementById("selector").value;

    

    switch (selector) {
        case "+":
        calculo = (n1 + n2);
        document.getElementById("resultado").innerHTML = `o resultado da soma de ${n1}+${n2} é = ${calculo}`
        break
    }

    switch (selector) {
        case "-":
        calculo = (n1 - n2);
        document.getElementById("resultado").innerHTML = `o resultado da subtração de ${n1}-${n2} é = ${calculo}`
        break
    }

    switch (selector) {
        case "/":
            calculo = Math.round((n1 / n2));
            if (Number.isNaN(calculo)) {
                document.getElementById("resultado").innerHTML = "Insira um divisível válido"
            } else {
                document.getElementById("resultado").innerHTML = `o resultado da divisão de ${n1}/${n2} é = ${calculo}`
                break
            }
    }
    
    switch (selector) {
         case "*":
            calculo = Math.round((n1*n2));
            
            document.getElementById("resultado").innerHTML = `o resultado da multiplicação de ${n1}*${n2} é = ${calculo}`
             break
            
        }
 }

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Calculadora Simples</title>
</head>
<body>
    <header>
        <h1>Calculadora simples</h1>
    </header>

    <div id="form">
        <input type="number" id="n1" placeholder="Digite o primeiro número"><br><br>

        <select  id="selector">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">:</option>
        </select><br><br>

        <input type="number" id="n2" placeholder="Digite o segundo número"><br><br>

        <button onclick="calcular()">
            Calcular
        </button>
        
    </div>

    <div>
        <h3 id="resultado"></h3>
    </div>

    <footer>
        <p id="me">Powered by C.R.Miranda</p>
    </footer>

    <script src="./scripts/script.js"></script>

</body>



</html>

css

body{
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
}

h1{
    font-family: sans-serif;
    font-weight: bolder;
}

input{
    width: 15%;
    height: 40px;
    box-sizing: border-box;
    border-radius: 5px;
}

#form{
    width: 100%;
}

button{
    background-color: rgba(255, 0, 0, 0.316);
    color: white;
    border: navy;
    /* width: 100%; */
    height: 40px;
    box-sizing: border-box;
    border-radius: 5px;
}

button:hover{
    cursor: pointer;
    background-color:red;
    
}

select{
    border-radius: 1px;
}

h3{
    font-family: sans-serif;
}

Mergulhe em programação