javascript calculator works for the first time but if i enter other values she works only after refreshing the page. Why?

Question

I tried to build this calculator, but she's works only for the first time but if i enter other values she works only after refreshing the page. For exemple if (coutJour = 5) and (nbrJour = 30) the result will to be : (slrBase = 150), (prime = 200) & (slrNet = 350). But the problem is if I enter an other values, the result will be the same she's don't change. Why?

var
    coutJour = Number(document.querySelector('#coutJour-input').value),
    nbrJour = Number(document.querySelector('#nbrJour-input').value);

var
    slrBase,
    slrNet;

var
    calcBtn = document.querySelector('#calc-btn'),
    resetBtn = document.querySelector('#reset-btn');

if(nbrJour >= 25){
    var prime = 200;
}
else{
    var prime = 0;
}


calcBtn.addEventListener('click', calcResult);

function calcResult(){
    slrBase = parseFloat(coutJour) * parseInt(nbrJour);
    slrNet = parseFloat(slrBase) + parseInt(prime);

    document.getElementById('sb-result').innerHTML = slrBase
    document.getElementById('prime-result').innerHTML = prime;
    document.getElementById('snet-result').innerHTML = slrNet;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#container{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-rows: 10% auto 5%;
}

#header{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #636363;
    box-shadow: 0 3px 6px #636363;
    cursor: pointer;
}

#header-title{
    text-transform: uppercase;
    letter-spacing: .3rem;
}

#main{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

#main-container{
    width: 350px;
    padding: 20px;
    border: 2px solid;
}

.input__container{
    margin-bottom: 15px;
}

.input__title{
    font-size: 1.2rem;
    font-weight: 600;
}

input{
    width: 100%;
    display: block;
    margin-top: 5px;
    padding: 8px 5px;
    border: 1px solid;
    background-color: transparent;
}

#btns{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

button{
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1rem;
    outline: none;
    cursor: pointer;
}

#calc-btn{
    height: 42px;
    border: none;
    background-color: #636363;
}

#reset-btn{
    padding: 5px 0;
    border: 1px solid;
    background-color: transparent;
}

#result{
    width: 100%;
    margin-top: 20px;
    padding: 5px;
}

.result__container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.result__title, .result__output{
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05rem; 
}

<div id="container">
            <header id="header">
                <h1 id="header-title">calcule le prime</h1>
            </header>

            <main id="main">
                <div id="main-container">
                    <form id="form">
                        <!-- ===== inputs ===== -->
                        <div id="inputs">
                            <div class="coutJour__input input__container">
                                <span class="coutJour__title input__title">Cout Journalier</span>
                                <input type="number" placeholder="Entrer votre cout journalier ici" id="coutJour-input">
                            </div>

                            <div class="coutJour__input input__container">
                                <span class="nbrJour__title input__title">Nombre des jours</span>
                                <input type="number" placeholder="Entrer votre nombre des jours ici" id="nbrJour-input">
                            </div>
                        </div>
    
                        <!-- ===== buttons ===== -->
                        <div id="btns">
                            <button type="button" id="calc-btn">calcul</button>
                            <button type="reset" id="reset-btn">reset</button>
                        </div>
                    </form>
    
                    <!-- ===== result output ===== -->
                    <div id="result">
    
                        <!-- ===== salaire de base output ===== -->
                        <div id="sb-container" class="result__container">
                            <span class="result__title">Salaire de base :</span>
                            <span id="sb-result" class="result__output">0</span>
                        </div>
    
                        <!-- ===== prime output ===== -->
                        <div id="prime-container" class="result__container">
                            <span class="result__title">Prime :</span>
                            <span id="prime-result" class="result__output">0</span>
                        </div>
    
                        <!-- ===== salaire net output ===== -->
                        <div id="snet-container" class="result__container">
                            <span class="result__title">Salaire net :</span>
                            <span id="snet-result" class="result__output">0</span>
                        </div>
                    </div>
                </div>
            </main>
        </div>

Answer 1

I think you need o coutJour and nbrJour on calcBtn click. Try this below code.

calcBtn = document.querySelector('#calc-btn'),
calcBtn.addEventListener('click', calcResult);

function calcResult(){
    var
        coutJour = Number(document.querySelector('#coutJour-input').value),
        nbrJour = Number(document.querySelector('#nbrJour-input').value);

    var
        slrBase,
        slrNet;

    var
        
        resetBtn = document.querySelector('#reset-btn');

    if(nbrJour >= 25){
        var prime = 200;
    }
    else{
        var prime = 0;
    }
    slrBase = parseFloat(coutJour) * parseInt(nbrJour);
    slrNet = parseFloat(slrBase) + parseInt(prime);

    document.getElementById('sb-result').innerHTML = slrBase
    document.getElementById('prime-result').innerHTML = prime;
    document.getElementById('snet-result').innerHTML = slrNet;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#container{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-rows: 10% auto 5%;
}

#header{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #636363;
    box-shadow: 0 3px 6px #636363;
    cursor: pointer;
}

#header-title{
    text-transform: uppercase;
    letter-spacing: .3rem;
}

#main{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

#main-container{
    width: 350px;
    padding: 20px;
    border: 2px solid;
}

.input__container{
    margin-bottom: 15px;
}

.input__title{
    font-size: 1.2rem;
    font-weight: 600;
}

input{
    width: 100%;
    display: block;
    margin-top: 5px;
    padding: 8px 5px;
    border: 1px solid;
    background-color: transparent;
}

#btns{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

button{
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1rem;
    outline: none;
    cursor: pointer;
}

#calc-btn{
    height: 42px;
    border: none;
    background-color: #636363;
}

#reset-btn{
    padding: 5px 0;
    border: 1px solid;
    background-color: transparent;
}

#result{
    width: 100%;
    margin-top: 20px;
    padding: 5px;
}

.result__container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.result__title, .result__output{
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05rem; 
}

<div id="container">
            <header id="header">
                <h1 id="header-title">calcule le prime</h1>
            </header>

            <main id="main">
                <div id="main-container">
                    <form id="form">
                        <!-- ===== inputs ===== -->
                        <div id="inputs">
                            <div class="coutJour__input input__container">
                                <span class="coutJour__title input__title">Cout Journalier</span>
                                <input type="number" placeholder="Entrer votre cout journalier ici" id="coutJour-input">
                            </div>

                            <div class="coutJour__input input__container">
                                <span class="nbrJour__title input__title">Nombre des jours</span>
                                <input type="number" placeholder="Entrer votre nombre des jours ici" id="nbrJour-input">
                            </div>
                        </div>
    
                        <!-- ===== buttons ===== -->
                        <div id="btns">
                            <button type="button" id="calc-btn">calcul</button>
                            <button type="reset" id="reset-btn">reset</button>
                        </div>
                    </form>
    
                    <!-- ===== result output ===== -->
                    <div id="result">
    
                        <!-- ===== salaire de base output ===== -->
                        <div id="sb-container" class="result__container">
                            <span class="result__title">Salaire de base :</span>
                            <span id="sb-result" class="result__output">0</span>
                        </div>
    
                        <!-- ===== prime output ===== -->
                        <div id="prime-container" class="result__container">
                            <span class="result__title">Prime :</span>
                            <span id="prime-result" class="result__output">0</span>
                        </div>
    
                        <!-- ===== salaire net output ===== -->
                        <div id="snet-container" class="result__container">
                            <span class="result__title">Salaire net :</span>
                            <span id="snet-result" class="result__output">0</span>
                        </div>
                    </div>
                </div>
            </main>
        </div>