No obtengo el resultado en javascript para calcular el pago de estacionamiento por horas, les agradecería mucho su ayuda amigos!

Avatar

Hola amigos estoy trabajando con un ejercicio para calcular el pago de estacionamiento por horas, y sólo estoy trabajando con la primera condición pero no me da el resultado, no deseo trabajar con onclick en los inputs , y por eso estoy usando el evento DOMContentLoaded y llamando otra función como parámetro para ahi capturar mi botón Calcular y lo asocio con el addEventListener, pero algo esta mal que no me da el resultado, estaré muy agradecido con su ayuda amigos, gracias.

<!--
       El dueño de un estacionamiento requiere un programa que le permita determinar cuánto debe cobrar por el uso del estacionamiento a sus clientes. Las tarifas que se tienen son las siguientes:
       Las dos primeras horas a $5.00 c/u. Las siguientes tres a $4.00 c/u. Las cinco siguientes a $3.00 c/u. Después de diez horas el costo por cada una es de dos pesos.
   -->
   <form action="" class="frm">
       <fieldset class="fieldset">
           <legend class="legend">Tarifa Estacionamiento</legend>
           <br>
           <label for="name">Nombres: </label><input class="inputText" type="text" name="name" id="name"><br><br>
           <label for="lastname">Apellidos: </label><input class="inputText" type="text" name="lastname" id="lastname"><br><br>
           <label for="cant-hours">Cantidad horas: </label><input class="inputText" type="text" name="cant-hours" id="cant-hours"><br><br>
           <label for="pago-hour">Pago hora: </label><input class="inputText" type="text" name="pago-hour" id="pago-hour" ><br><br>
           <div>
               <button class="btn" id="btnCalcular" type="button">CALCULAR</button>
               <button class="btn" id="btnLimpiar" type="reset">LIMPIAR</button>
           </div>
       </fieldset>
       <br>
       <hr>   
   </form>

   <div class="results" id="results">
       <label class="etiqueta" id="">Sr(a)</label> <label class="answer" id="nombres-completos"></label>
       <label class="etiqueta" id="">Cantidad de horas:</label> <label class="answer" id="hrs-trabajadas"></label>
       <label class="etiqueta" id="">Pago por hora:</label> <label class="answer" id="hrs-extras"></label>
       <label class="etiqueta" id="">Pago total:</label> <label class="answer" id="pagoTotal"></label>
   </div>
  *,
*::before,
*::after{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body{
   font-family: sans-serif;
}
.frm{
   margin: 2rem 2rem 0;
}
.fieldset{
   width: 30%;
}
.fieldset div{
   display: flex;
   justify-content: space-evenly;
   width: 30%;
   margin-left: auto;
   margin-right: auto;
}
.inputText{
   width: 60%;
   padding: .3em;
   font: 400 1rem sans-serif; 
}
label{
  display: inline-block;
  width: 150px;
  text-align: right;
  margin-right: 1em;
}
.btn{
   display: block;
   padding: .5em;
   margin: 0 auto 1rem;
   box-shadow: 0 2px 2px rgba(0,0,0,.6);
}
.results{
   width: 23%;
   margin-top: 2rem;
   margin-left: 2rem;
   display: none;
}
.results .etiqueta{
   width: 190px;
   text-align: left;
}
.results .answer, .etiqueta{
   display: inline-block;
}
.results .answer{
   width: 48%;
   text-align: left;
}
document.addEventListener('DOMContentLoaded', inicializar)

const inicializar = () => {
   let btnCalc = document.getElementById('btnCalcular')
   btnCalc.addEventListener('click', calcular)
}

const calcular = () => {
   let name = document.getElementById('name')
   let apel = document.getElementById('lastname')
   let ch = document.getElementById('cant-hours')
   let ph = document.getElementById('pago-hour')
   let results = document.getElementById('results')
   var tp

   if(ch < 3){
       ph = 5
       tp = `${ch.value * ph.value}`
   }
   
   let stp = document.getElementById('pagoTotal')
   stp.textContent = tp
   results.style.display = 'block'

} 
7respuestas
CSSJavascriptHTML
Avatar

Cuando haces lo siguiente:

const elemento = document.getElementById('id')

Solo estas obteniendo un elemento del DOM. No su contenido. Para eso debes hacer lo siguiente:

const elemento = document.getElementById('id').value // si es un input

Y recuerda que los valores siempre son strings asi que si vas a realizar operaciones siempre debes convertirlos a números. La forma facil (no la mejor) es:

const elemento = Number(document.getElementById('id').value)
Avatar

Exacto. Y tal como dice Álvaro, "Number" es una forma fácil. Idealmente, debes colocar código que soporte errores. Por ejemplo, esto asegura de que si el programa no encuentra el elemento con ID "id" en el DOM, éste seguira su rumbo y no se detendrá por el error:

if(document.getElementById('id')){const elemento = Number(document.getElementById('id').value)}

Otros ejemplos serían, por ejemplo, si se tratase de un número celular y el usuario le coloca un signo al inicio (tipo "+999999888"), entonces tu código debe identificar elementos no numéricos y eliminarlos.

Avatar

Oh muy interesante amigo Rodrigo, pero en vez de Number tmb podría usar parseInt cierto?

Avatar

Puedes usar parseInt() pero solo sirve para enteros. Si necesitas decimales, parseFloat() por eso dije que la forma más fácil, aunque no la mejor, era Number().

Avatar

una pregunta quieres que el programa sea autónomo es decir que tu solo registres al cliente y tengas la opción de cobrar y al momento de dar click en cobrar sólito realice la operación de ver cuantas horas estuvo estacionado y por lo tanto ver cuanto tiene que pagar o tu pondrás todo manual en los inputs desde cuantas horas estuvo y el precio de la hora digo necesito saber ese detalle para poder darte una ayuda buena

Avatar

Hola amigo Mauricio , bueno yo solo quiero agregar la cantidad de horas y que automaticamente en otro input me salga el pago por hora, este es el enunciado: " El dueño de un estacionamiento requiere un programa que le permita determinar cuánto debe cobrar por el uso del estacionamiento a sus clientes. Las tarifas que se tienen son las siguientes: Las dos primeras horas a $5.00 c/u. Las siguientes tres a $4.00 c/u. Las cinco siguientes a $3.00 c/u. Después de diez horas el costo por cada una es de dos pesos. "

Avatar

Entiendo profesor Alvaro, gracias por su ayuda!

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Tipos de datos en Java

Tipos de datos en Java