javascript计算器第一次工作，但如果我输入其他值，她只有在刷新页面后才能工作.为什么

Question

我试图构建这个计算器，但她只是第一次工作，但如果我输入其他值，她只有在刷新页面后才能工作。例如，如果(coutJour＝5(和(nbrJour＝30(，结果将是：(slrBase＝150(，(prime＝200(&(slrNet=350(。但问题是，如果我输入其他值，结果会是一样的，她不会改变。为什么？

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

我认为您需要在单击calcBtn时使用coutJour和nbrJour。试试下面的代码。

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>