CODEWITHSUNDEEP
javascript
codeHysteria
codeHysteria

Reputation: 63

Can I loop over this numbers?

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>&nbsp;<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>

Upvotes: 0

Views: 75

Answers (1)

Mamun
Mamun

Reputation: 68933

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>&nbsp;<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>

Upvotes: 1

Related Questions