I am making a reservation system for a fitness center. If you have a look on table 'obsadenost' there is lock icon + number 0/7. On every click, I want to loop over this number 0/7. What is happening is when I click on it I only put 7/7. I want to have it like after every click from 0/7 to 1/7, 2/7 and so on to 7/7.
var marcel = document.getElementById('marcel1');
var span = document.querySelector('#pocet').textContent = 0 + '/' + 7;
var badge = document.querySelector('#badge').classList.add('badge-success');
var lock = document.querySelector('#lock').classList.add('fa-unlock');
function rezervacka(){
badge = document.querySelector('#badge');
lock = document.querySelector('#lock');
for(i = 1; i <= 7; i++) {
var pocet = document.querySelector('#pocet');
pocet.textContent = i + '/' + 7;
console.log(pocet);
}
if(pocet.textContent === '7/7') {
badge.classList.add('badge-danger');
lock.classList.add('fa-lock');
}else {
badge.classList.add('badge-success');
lock.classList.add('fa-unlock');
}
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"
integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<table class="table table-striped table-hover">
<caption>
Pondelok,
16.12.2019 <br/>
</caption>
<thead>
<tr>
<th>Čas</th>
<th>Workout</th>
<th>Obsadenosť</th>
</tr>
</thead>
</tbody>
<tr>
<td>
07:00 -
07:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div id="badge" class="badge"> <i id="lock" class="fa fa-lock"></i> <span id="pocet"></span></div>
</td>
</tr>
<tr>
<td>
11:00 -
11:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 1/7
</div>
</td>
</tr>
<tr>
<td>
17:00 -
17:50
</td>
<td>Powercore Workout so Samom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 2/7
</div>
</td>
</tr>
<tr>
<td>
18:00 -
18:50
</td>
<td>Powercore Workout so Samom Level 1 Zaciatocnici</td>
<td>
<div class="badge badge-success"> <i class="fa "></i> 3/7
</div>
</td>
</tr>
</tbody>
</table>
<button id="marcel1" onclick="rezervacka();">Marcel</button>
<button id="marcel2">Marcel</button>
<button id="samo">Samo</button>
<button id="zaciatok">Zaciatocnici</button>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>1 Answer 1
You can do that by checking the current value:
var currentVal = Number(pocet.textContent.split('/')[0]);
if(currentVal < 7){
pocet.textContent = (currentVal+1) + '/' + 7;
}
var marcel = document.getElementById('marcel1');
var span = document.querySelector('#pocet').textContent = 0 + '/' + 7;
var badge = document.querySelector('#badge').classList.add('badge-success');
var lock = document.querySelector('#lock').classList.add('fa-unlock');
function rezervacka(user){
badge = document.querySelector('#badge');
lock = document.querySelector('#lock');
if(user.id == 'marcel1'){
var pocet = document.querySelector('#pocet');
var currentVal = Number(pocet.textContent.split('/')[0]);
if(currentVal < 7){
pocet.textContent = (currentVal+1) + '/' + 7;
}
if(pocet.textContent === '7/7') {
badge.classList.add('badge-danger');
lock.classList.add('fa-lock');
}else {
badge.classList.add('badge-success');
lock.classList.add('fa-unlock');
}
}
};<script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"
integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<table class="table table-striped table-hover">
<caption>
Pondelok,
16.12.2019 <br/>
</caption>
<thead>
<tr>
<th>Čas</th>
<th>Workout</th>
<th>Obsadenosť</th>
</tr>
</thead>
<tbody>
<tr>
<td>
07:00 - 07:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div id="badge" class="badge"> <i id="lock" class="fa fa-lock"></i> <span id="pocet"></span></div>
</td>
</tr>
<tr>
<td>
11:00 - 11:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 1/7</div>
</td>
</tr>
<tr>
<td>
17:00 - 17:50
</td>
<td>Powercore Workout so Samom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 2/7</div>
</td>
</tr>
<tr>
<td>
18:00 - 18:50
</td>
<td>Powercore Workout so Samom Level 1 Zaciatocnici</td>
<td>
<div class="badge badge-success"> <i class="fa "></i> 3/7</div>
</td>
</tr>
</tbody>
</table>
<button id="marcel1" onclick="rezervacka(this);">Marcel</button>
<button id="marcel2">Marcel</button>
<button id="samo">Samo</button>
<button id="zaciatok">Zaciatocnici</button>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>
<script src="app.js"></script>
answered Dec 15, 2019 at 14:30
Mamun
69k9 gold badges51 silver badges62 bronze badges
Sign up to request clarification or add additional context in comments.
8 Comments
codeHysteria
is there a chance to reflect the changes for every user ? should i work with local storage or session storage ? thanks
Mamun
@codeHysteria, you can pass
this object to the function with which you can identify which user has clicked the button. Then you can update the respective user information:)Mamun
@codeHysteria, I have updated the code for
id=marcel1, similar way you can do for other users:)codeHysteria
this buttons id=marcel1 and so on they are representing fitness trainers and their particular session in day. This counter wich you helped me to finish represents how many people already reserved a place on this session. I just want to know if there is any way how to reflect the changes for other visitors. Because when i use localStorage its gonna be visible only on my local machine. Should i connect it somehow with backend(php) ???
Mamun
@codeHysteria, in that use case I believe you have to store the data in storage and show from there:)
|
lang-js
pocet.textContent === '7/7'will always be true.