I have three input fields: nightly rate, weekly rate, and monthly rate. People on the site are getting confused on determining a weekly and monthly rate based on their nightly rate (not joking). I put a div next to the labels to show the nightly average for the week and/or month. You can see two ways I currently have the code. Each night has to be a minimum of $100, so I made a condition to only show the average nightly rate for the week if the condition of $700 is met. The problem is if you delete the values in the input the numbers still stay for the weekly rate. The numbers should disappear in real-time when deleted.
I also set the monthly amount to simply reflect in real-time what the user types. If I decide to keep the condition for $700 how can I clear the values in real time like the monthly rate code currently does?
Please note: I realize I need to account somehow to not show if NaN, 0, etc. In the real app I will be using Ruby constants to calculate the week/month vs literal numbers like 7 or 30. Any help is appreciated.
const weeklyRateInput = document.getElementById('weekly-rate');
const monthlyRateInput = document.getElementById('monthly-rate');
const displayWeeklyRate = document.getElementById('weekly-avg-rate');
const displayMonthlyRate = document.getElementById('monthly-avg-rate');
weeklyRateInput.addEventListener('input', calcWeeklyRate);
function calcWeeklyRate() {
if (weeklyRateInput.value >= 700) {
displayWeeklyRate.innerHTML = '$' + Math.round(weeklyRateInput.value / 7) + ' per night';
}
return false;
}
monthlyRateInput.addEventListener('input', calcMonthlyRate);
function calcMonthlyRate() {
displayMonthlyRate.innerHTML = '$' + Math.round(monthlyRateInput.value / 30) + ' per night';
}input,
label {
display: block;
}
label {
margin: 1%;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
width: 500px;
}
#weekly-avg-rate {
float: right;
color: green;
}
#monthly-avg-rate {
float: right;
color: green;
}<label for="nightly">Nightly Rate</label>
<input class="nightly-rate" id="nightly-rate" type="text" placeholder="$300">
<div class="container">
<label for="weekly">Weekly Rate</label>
<div id="weekly-avg-rate">
</div>
</div>
<input class="weekly-rate" id="weekly-rate" type="text" placeholder="$2000.">
<div class="container">
<label for="monthly">Monthly Rate</label>
<div id="monthly-avg-rate">
</div>
</div>
<input class="monthly-rate" id="monthly-rate" type="text" placeholder="$6000">why don't you just simply check if input's value is '' and if it is hide the green text ?
function calcWeeklyRate() {
if (weeklyRateInput.value == '') {
displayWeeklyRate.innerHTML = '';
}
if (weeklyRateInput.value >= 700) {
displayWeeklyRate.innerHTML = '$' + Math.round(weeklyRateInput.value / 7) + ' per night';
}
return false;
}
const weeklyRateInput = document.getElementById('weekly-rate');
const monthlyRateInput = document.getElementById('monthly-rate');
const displayWeeklyRate = document.getElementById('weekly-avg-rate');
const displayMonthlyRate = document.getElementById('monthly-avg-rate');
weeklyRateInput.addEventListener('input', calcWeeklyRate);
function calcWeeklyRate() {
if (weeklyRateInput.value >= 700) {
displayWeeklyRate.innerHTML = '$' + Math.round(weeklyRateInput.value / 7) + ' per night';
} else {
displayWeeklyRate.innerHTML = '';
}
return false;
}
monthlyRateInput.addEventListener('input', calcMonthlyRate);
function calcMonthlyRate() {
if (monthlyRateInput.value == '' || monthlyRateInput.value < 30 || parseFloat(monthlyRateInput.value) != monthlyRateInput.value) {
displayMonthlyRate.innerHTML = '';
return;
}
displayMonthlyRate.innerHTML = '$' + Math.round(monthlyRateInput.value / 30) + ' per night';
}input,
label {
display: block;
}
label {
margin: 1%;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
width: 500px;
}
#weekly-avg-rate {
float: right;
color: green;
}
#monthly-avg-rate {
float: right;
color: green;
}<label for="nightly">Nightly Rate</label>
<input class="nightly-rate" id="nightly-rate" type="text" placeholder="$300">
<div class="container">
<label for="weekly">Weekly Rate</label>
<div id="weekly-avg-rate">
</div>
</div>
<input class="weekly-rate" id="weekly-rate" type="text" placeholder="$2000.">
<div class="container">
<label for="monthly">Monthly Rate</label>
<div id="monthly-avg-rate">
</div>
</div>
<input class="monthly-rate" id="monthly-rate" type="text" placeholder="$6000">The reason the text doesn't disappear is that when the value is less than 700 there is no code to tell it to do something.
Easiest thing to do would be to add an else statement which then clears the text.
function calcWeeklyRate() {
if (weeklyRateInput.value >= 700) {
displayWeeklyRate.innerHTML = '$' + Math.round(weeklyRateInput.value / 7) + ' per night';
}
else{
displayWeeklyRate.innerHTML = '';
}
}Edit:
The reason the monthly one is "clearing" is because there is no condition like the weekly one so the code which updates it will always run
Here is an example that updated every field based on what is entered where
const nightlyRateInput = document.getElementById('nightly-rate');
const weeklyRateInput = document.getElementById('weekly-rate');
const monthlyRateInput = document.getElementById('monthly-rate');
const displayNightlyRate = document.getElementById('nightly-avg-rate');
const displayWeeklyRate = document.getElementById('weekly-avg-rate');
const displayMonthlyRate = document.getElementById('monthly-avg-rate');
document.getElementById("rateDiv").addEventListener('input', calcRate);
function calcRate(e) {
const tgt = e.target;
const rate = +e.target.placeholder.replace('$','')
displayWeeklyRate.innerHTML = ""
displayMonthlyRate.innerHTML = ""
displayNightlyRate.innerHTML = ""
let n = 0
let w = 0
let m = 0
if (tgt.value.trim() === "") return;
if (tgt.id === "monthly-rate") {
n = Math.round(rate / 30)
w = Math.round(rate / 4)
m = rate
nightlyRateInput.value = ""
weeklyRateInput.value = ""
}
else if (tgt.id === "weekly-rate") {
n = Math.round(rate / 4)
w = rate
m = Math.round(rate * 4)
nightlyRateInput.value = ""
monthlyRateInput.value = ""
}
else if (tgt.id === "nightly-rate") {
n = rate
w = Math.round(rate * 4)
m = Math.round(rate * 30)
weeklyRateInput.value = ""
monthlyRateInput.value = ""
}
displayWeeklyRate.innerHTML = '$' + w + ' per week';
displayMonthlyRate.innerHTML = '$' + m + ' per month';
displayNightlyRate.innerHTML = '$' + n + ' per night';
};input,
label {
display: block;
}
label {
margin: 1%;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
width: 500px;
}
#weekly-avg-rate {
float: right;
color: green;
}
#monthly-avg-rate {
float: right;
color: green;
}<div id="rateDiv">
<div class="container">
<label for="nightly">Nightly Rate</label>
<div id="nightly-avg-rate"></div>
<input class="nightly-rate" id="nightly-rate" type="text" placeholder="$300" autocomplete="off" />
</div>
<div class="container">
<label for="weekly">Weekly Rate</label>
<div id="weekly-avg-rate"></div>
<input class="weekly-rate" id="weekly-rate" type="text" placeholder="$2000" autocomplete="off" />
</div>
<div class="container">
<label for="monthly">Monthly Rate</label>
<div id="monthly-avg-rate">
</div>
<input class="monthly-rate" id="monthly-rate" type="text" placeholder="$6000" autocomplete="off" />
</div>
</div>