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.

1<!--
2       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:
3       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.
4   -->
5   <form action="" class="frm">
6       <fieldset class="fieldset">
7           <legend class="legend">Tarifa Estacionamiento</legend>
8           <br>
9           <label for="name">Nombres: </label><input class="inputText" type="text" name="name" id="name"><br><br>
10           <label for="lastname">Apellidos: </label><input class="inputText" type="text" name="lastname" id="lastname"><br><br>
11           <label for="cant-hours">Cantidad horas: </label><input class="inputText" type="text" name="cant-hours" id="cant-hours"><br><br>
12           <label for="pago-hour">Pago hora: </label><input class="inputText" type="text" name="pago-hour" id="pago-hour" ><br><br>
13           <div>
14               <button class="btn" id="btnCalcular" type="button">CALCULAR</button>
15               <button class="btn" id="btnLimpiar" type="reset">LIMPIAR</button>
16           </div>
17       </fieldset>
18       <br>
19       <hr>   
20   </form>
21
22   <div class="results" id="results">
23       <label class="etiqueta" id="">Sr(a)</label> <label class="answer" id="nombres-completos"></label>
24       <label class="etiqueta" id="">Cantidad de horas:</label> <label class="answer" id="hrs-trabajadas"></label>
25       <label class="etiqueta" id="">Pago por hora:</label> <label class="answer" id="hrs-extras"></label>
26       <label class="etiqueta" id="">Pago total:</label> <label class="answer" id="pagoTotal"></label>
27   </div>

1  *,
2*::before,
3*::after{
4   box-sizing: border-box;
5   margin: 0;
6   padding: 0;
7}
8body{
9   font-family: sans-serif;
10}
11.frm{
12   margin: 2rem 2rem 0;
13}
14.fieldset{
15   width: 30%;
16}
17.fieldset div{
18   display: flex;
19   justify-content: space-evenly;
20   width: 30%;
21   margin-left: auto;
22   margin-right: auto;
23}
24.inputText{
25   width: 60%;
26   padding: .3em;
27   font: 400 1rem sans-serif; 
28}
29label{
30  display: inline-block;
31  width: 150px;
32  text-align: right;
33  margin-right: 1em;
34}
35.btn{
36   display: block;
37   padding: .5em;
38   margin: 0 auto 1rem;
39   box-shadow: 0 2px 2px rgba(0,0,0,.6);
40}
41.results{
42   width: 23%;
43   margin-top: 2rem;
44   margin-left: 2rem;
45   display: none;
46}
47.results .etiqueta{
48   width: 190px;
49   text-align: left;
50}
51.results .answer, .etiqueta{
52   display: inline-block;
53}
54.results .answer{
55   width: 48%;
56   text-align: left;
57}

1document.addEventListener('DOMContentLoaded', inicializar)
2
3const inicializar = () => {
4   let btnCalc = document.getElementById('btnCalcular')
5   btnCalc.addEventListener('click', calcular)
6}
7
8const calcular = () => {
9   let name = document.getElementById('name')
10   let apel = document.getElementById('lastname')
11   let ch = document.getElementById('cant-hours')
12   let ph = document.getElementById('pago-hour')
13   let results = document.getElementById('results')
14   var tp
15
16   if(ch < 3){
17       ph = 5
18       tp = `${ch.value * ph.value}`
19   }
20   
21   let stp = document.getElementById('pagoTotal')
22   stp.textContent = tp
23   results.style.display = 'block'
24
25}