JavaScript - No obtengo el resultado en javascript para hallar el pago de estacionamiento por horas!

 
Vista:
Imágen de perfil de Grover
Val: 13
Ha disminuido su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

No obtengo el resultado en javascript para hallar el pago de estacionamiento por horas!

Publicado por Grover (5 intervenciones) el 06/05/2019 19:02:52
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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--
    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>
 
<script src="script.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
*,
*::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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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'
 
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

No obtengo el resultado en javascript para hallar el pago de estacionamiento por horas!

Publicado por Alejandro (535 intervenciones) el 06/05/2019 20:10:35
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
La linea 1 de JS ponla después de la declaración de inicializar
1
2
3
4
5
const inicializar = () => {
    let btnCalc = document.getElementById('btnCalcular');
    btnCalc.addEventListener('click', calcular);
}
document.addEventListener('DOMContentLoaded', inicializar);

y obvio corrige el código Linea 16 y 17 les falta .value
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Grover
Val: 13
Ha disminuido su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

No obtengo el resultado en javascript para hallar el pago de estacionamiento por horas!

Publicado por Grover (5 intervenciones) el 06/05/2019 20:56:31
muchas gracias amigo, me funcionó muy bien, Dios te bendiga!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar