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 = 5tp = `${ch.value * ph.value}`
}let stp = document.getElementById('pagoTotal')
stp.textContent = tp
results.style.display = 'block'
}Valora esta pregunta
0
