HTML/CSS/JS, demande d'aide

Chrstn67 — Fri, 09 Sep 2022 17:18:05 +0000
Bonjour à tous.
Je suis nouveau ici (et français) et débutant dans le dév, avec quelques notions, donc je ne suis pas sûr de demander de l'aide au bon endroit...
J'ai conçu ce code, mais depuis que j'ai rajouté l'une ou l'autre fonctionnalité, il ne fonctionne plus....
Quelqu'un peut-il m'aider, sachant que je vais suivre une formation Développeur Web dans 2 mois, svp ?
Merci d'avance pour vos tuyaux :)
Voici mon code:
<!DOCTYPE html>
<html>
  <head>
    <title>Questions pour un Champion</title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
    />
  </head>
  <body style="position:center;">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div
            class="alert alert-danger"
            role="alert"
            style="text-align: center; font-weight: bold">




      <button
      class="btn btn-warning"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapse2"
      aria-expanded="false"
      aria-controls="collapseExample"
      style="background-color:grey; font-size:10px;"
      >
      <i class="fas fa-newspaper"></i></i> MAJ V.3 <br> (13 août 2022)</button
      ><br />
      <div class="collapse" id="collapse2" style="margin-top: 10px">
      <div class="alert alert-warning" style="text-align: justify; font: size 10px; background-color:coral;">
        - Modification complète du principe de jeu de cette manche <br>
      </div>
      </div>





            <h1>MASTER DUEL</h1>
                  <button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <i class="fas fa-hand-sparkles"></i> Règles
                </button><br/>
                <div class="collapse" id="collapseExample" style="margin-top: 10px">
                    <div class="alert alert-warning" style="text-align: justify">
                    - L'objectif de cette manche est de marquer un maximum de point avec un minimun d'indices. <br>
                    - A tour de rôle, chaque équipe devra deviner le nom d'un personnage biblique grâce aux indices donnés, en 80 secondes maximum. <br>
                    - Les indices peuvent être choisi dans l'ordre que l'équipe le souhaite. <br>
                    - L'équipe n'est pas obligé d'utiliser tous les indices. <br>
                    - Dès qu'elle pense avoir trouvée la réponse, l'équipe valide, l'animateur vérifie et accorde ou non les points affichés.
                    - Plus le personnage est trouvé tôt, plus le score sera élevé. <br>
                    - La première équipe à atteindre 21 points gagne la manche et le jeu. <br>


                  </div>
                </div>


              </div>
            </div>
          </div>





        <div class="row">
            <div class="col">


              <div class="col"><button id="indice1" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°1</button>
            <span id="affI1" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>

               <div class="col"><button id="indice2" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°2</button>
               <span id="affI2" style="font-size:40px; text-align:center; color:darkgreen;"></span></div> 

               <div class="col"><button id="indice3" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°3</button>
               <span id="affI3" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>

               <div class="col"><button id="indice4" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°4</button>
               <span id="affI4" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>

               <div class="col"><button id="indice5" class="btn btn-info" style="background-color:orangered; font-size: 20px" type="button"><i class="fas fa-glasses"></i> Indice n°5</button>
               <span id="affI5" style="font-size:40px; text-align:center; color:darkgreen;"></span></div>


               <div><button id="enigme" class="btn btn-info" style="background-color:chocolate; font-size: 20px" type="button"><i class="fa fa-search"></i> Enigme</button></div>
               <tr><span id="affEnigme" style="font-size:40px; text-align:center; color:darkgreen;"></span></tr>
             <br>

            </div>
<div class="col">
  <td><button id="chronometre" class="btn btn-warning" type="button" style="background-color:burlywood; font-size: 20px"><i class="fas fa-stopwatch"></i> Chrono</button></td>
  <div
                  class="alert alert-danger"
                  role="alert"
                  style="text-align: center; font-size: 19px;"
                >
                  <b>Temps restant :</b>
                </div>
                <div
               class="alert alert-secondary"
               role="alert"
               style="text-align: center; font-size: 2em; font-weight: bold"
             >
               <span id="countdown_sec">80 secondes</span>
             </div>
             <div class="alert alert-danger" role="alert" style="text-align:center;">
              <b>Score actuel :</b>
          </div>
          <div class="jumbotron" style="text-align:center;font-size:2em;font-weight:bold">
              <span id="scoreencours">0</span>
          </div>
      </div>
  </div>
</div>







                <div class="col">
<table class="table table-striped table-bordered">
                        <thead>
                            <tr class="table-success">
                                <th>  ÉQUIPES QUALIFIÉES + JOUEURS</th>
                                <th>  SCORE</th>
                                <th>  COMPTEUR
                                </th>
                                <th>  ÉQUIPE GUIDE</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1ère Équipe Qualifiée
                                    <input></td>
                                    <td><span id="compteur1" style="font-size: 20px"><b>0</b></span></td>
                                    <td>
                                        <button class="btn btn-success compteur" value="1|1" style="background-color:blue; font-size: 20px"><i class="fas fa-plus"></i> 1</button>&nbsp;
                                        <button class="btn btn-success compteur" value="1|2" style="background-color:green; font-size: 20px" type="button"><i class="fas fa-plus"></i> 2</button>&nbsp;
                                        <button class="btn btn-success compteur" value="1|4" style="background-color:yellowgreen; font-size: 20px;" type="button"><i class="fas fa-plus"></i> 4</button>&nbsp;
                                        <button class="btn btn-danger compteur" value="1|6" style="background-color:gold; font-size: 20px" type="button"><i class="fas fa-plus"></i> 6</button>

                                    </td>
                                    <td><input></td>
                                </tr>

                            </td>
                        </tr>
                        <tr>
                            <td>2ème Équipe Qualifiée
                                <input></td>
                                <td><span id="compteur2" style="font-size: 20px"><b>0</b></span></td>
                                <td>
                                    <button class="btn btn-success compteur" value="2|1" style="background-color:blue; font-size: 20px;"type="button"><i class="fas fa-plus"></i> 1</button>&nbsp;
                                    <button class="btn btn-success compteur" value="2|2" style="background-color:green; font-size: 20px" type="button"><i class="fas fa-plus"></i> 2</button>&nbsp;
                                    <button class="btn btn-success compteur" value="2|4" style="background-color:yellowgreen; font-size: 20px" type="button"><i class="fas fa-plus"></i> 4</button>&nbsp;
                                    <button class="btn btn-danger compteur" value="2|6" style="background-color:gold; font-size: 20px" type="button"><i class="fas fa-plus"></i> 6</button>


                                </td>
                              <td><input></td>
                            </tr>
                              <!-- <tr>
                              <td>3ème Équipe Qualifiée
                                  <input></td>
                                  <td><span id="compteur3"><b>0</b></span></td>
                                  <td>
                                      <button class="btn btn-success compteur" value="3|1" style="background-color:blue;"type="button"><i class="fas fa-plus"></i> 1</button>&nbsp;
                                      <button class="btn btn-success compteur" value="3|2" style="background-color:green;" type="button"><i class="fas fa-plus"></i> 2</button>&nbsp;
                                      <button class="btn btn-success compteur" value="3|4" style="background-color:yellowgreen;" type="button"><i class="fas fa-plus"></i> 4</button>&nbsp;
                                      <button class="btn btn-danger compteur" value="3|6" style="background-color:orange;" type="button"><i class="fas fa-plus"></i> 6</button>


                                  </td>
                                  <td><input></td>
                              </tr>  -->



            <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
            <!-- <script src="liste2.js"></script> -->
            <script>

            $(document).ready(function () {


var timer;
var random;
var personnages = [];


function aleatPerso () {
    var pmin = 0;
    var pmax = 64;

    random = Math.floor(Math.random() * (pmax - pmin)) + pmin;
// ajouter le fait de ne pas repiocher le même perso

if (personnages.length === max) {
            alert("Tous les personnages ont été trouvés !");
          } else if ($.inArray(parseInt(random), personnages) === -1) {
            $("#enigme").text(personnage[random][1]); 

            personnages.push(random); // rempli le tableau des questions déjà posées
            console.log(personnages);
          } else {
            // rappelle la fonction pour trouver un nouveau nombre aléatoire non utilisé
            aleatPerso();
          }


        $('#indice1').on('click', function() {
  $('#affI1').text(personnage[aleatoireperso][2]);
});

$('#indice2').on('click', function() {
  $('#affI2').text(personnage[aleatoireperso][3]);
});

$('#indice3').on('click', function() {
  $('#affI3').text(personnage[aleatoireperso][4]);
});

$('#indice4').on('click', function() {
  $('#affI4').text(personnage[aleatoireperso][5]);
});

$('#indice5').on('click', function() {
  $('#affI5').text(personnage[aleatoireperso][6]);
});

$('#enigme').on('click', function() {
  $('#affEnigme').text(personnage[aleatoireperso][1]);
});



$('#chronometre').on('click', function() {
  $secondes = 80; // définit le nombre de secondes
  $('#countdown_sec').text($secondes); //affiche 120 dans le chrono
  timerManager.start($secondes); 
});

timerManager = {
  start: function ($secondes) {

    if ($secondes >= 0) { // tant que le chrono est supérieur à zéro
    if ($secondes >= 61) {
  $('#scoreencours').text('+6');
} else if ($secondes >= 41) {
  $('#scoreencours').text('+4');
} else if ( $secondes >= 21) {
  $('#scoreencours').text('+2');
} else if ( $secondes >= 1) {
  $('#scoreencours').text('+1');
} else  {
  $('#scoreencours').text('+0');
}
$secondes = $secondes - 1; // provoque le décompte


      timer = setTimeout(function () { // éxécute le code toutes les 1000 millisecondes
        $('#countdown_sec').text($secondes); // affiche le temps restant
        timerManager.start($secondes); // rappelle la fonction
      }, 1000);
    } else {
      timerManager.stop(); // arrête le chrono
    }
  },
  stop: function () { // to be called when you want to stop the timer
    clearTimeout(timer);
    $('#countdown_sec').text('0');
  }

};



$('.compteur').on('click', function (e) {
    e.preventDefault();
    $val = $(this).attr('value').split('|');
    $champ = '#compteur' + $val[0];
    $new_score = parseInt($($champ).text()) + parseInt($val[1]);
    if ($new_score <= 20) {
        $('#compteur' + $val[0]).text($new_score);
    } else {
        $('#compteur' + $val[0]).text('VICTOIRE !!!');
    }

});




var personnage = [

    [0, 'Cauet','Radio','Chauve','Garfield','Méthode','Voix'],
    [1, 'Louane','Bélier','Louis','Télé','Blonde','Esmée'],
    [2, 'Sid','Paresseux','Cheveux','Glace','Sabre','5'],


];

            };
          });

</script>

</body>
</html>
DEV Community: Chrstn67

HTML/CSS/JS, demande d'aide
