Tengo tres campos de entrada: tarifa nocturna, tarifa semanal y tarifa mensual. Las personas en el sitio se confunden al determinar una tarifa semanal y mensual en función de su tarifa nocturna (no es broma). Puse un div junto a las etiquetas para mostrar el promedio nocturno de la semana o el mes. Puedes ver dos formas en que actualmente tengo el código. Cada noche debe tener un mínimo de $ 100, por lo que establecí la condición de mostrar solo la tarifa promedio por noche de la semana si se cumple la condición de $ 700. El problema es que si elimina los valores en la entrada, los números aún permanecen para la tarifa semanal. Los números deberían desaparecer en tiempo real cuando se eliminan.
También establecí la cantidad mensual para que simplemente refleje en tiempo real lo que escribe el usuario. Si decido mantener la condición por $700, ¿cómo puedo borrar los valores en tiempo real como lo hace actualmente el código de tarifa mensual?
Tenga en cuenta: me doy cuenta de que necesito contabilizar de alguna manera para no mostrar si NaN, 0, etc. En la aplicación real, usaré las constantes de Ruby para calcular la semana/mes frente a números literales como 7 o 30. Se agradece cualquier ayuda.
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">¿Por qué no simplemente verifica si el valor de entrada es '' y si oculta el texto verde?
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">La razón por la que el texto no desaparece es que cuando el valor es inferior a 700 no hay ningún código que le indique que haga algo.
Lo más fácil sería agregar una declaración else que luego borre el texto.
function calcWeeklyRate() { if (weeklyRateInput.value >= 700) { displayWeeklyRate.innerHTML = '$' + Math.round(weeklyRateInput.value / 7) + ' per night'; } else{ displayWeeklyRate.innerHTML = ''; } }Editar:
La razón por la que el mensual se "borra" es porque no existe una condición como la semanal, por lo que el código que lo actualiza siempre se ejecutará.
Aquí hay un ejemplo que actualizó cada campo en función de lo que se ingresa donde
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>