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'

}

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'

}

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'

}