Utiliser javascript pour inserer en bdd

Oui.
https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery

Pour faire "simple".
L'ajax (en Jquery) (ou le xmlhttprequest en pur javascript) permet, depuis un script JS, de faire appel à un script serveur (comme le php).
Il te faut donc un fichier PHP qui te permettra de manipuler la BDD et y faire appel depuis ton js.

Merci beaucoup, je vais regarder ça

Commence par inclure jquery à ta page.
(tu peux le récupérer ici, enregistre le dans le dossier de ton site web )
https://jquery.com/download/

et l'inclure dans ta page via

<script src="jquery-3.3.1.min.js"></script>

Ensuite, code le fichier php qui te servira à insérer les données dans ta bdd (ça je suppose/j'espère que tu sais faire...)


Puis après, dans ton code JS tu pourras mettre l'appel ajax vers le fichier php pour envoyer les données à ta base.

var data = {action:'liste_groupes' }; // les variables que tu veux envoyer à ton fichier php sous format json
var urlFichierAjx = "chemin/vers/ton/script.php"; // chemin vers le fichier php qui communique avec la bdd
  $.ajax({ 
        type: "POST",
        url: urlFichierAjx,
        data: data,
        async: true,
        dataType: "json"
  })
  .done(function(reponse){
       //code appelé si tout c'est bien passé dans le fichier php
      console.log(response);
      alert('OK');
  })
  .fail(function(jqXHR, textStatus){
     alert(textStatus);
 });
}

bien entendu, tu sais où placer, dans ton code js actuel, l'appel à cette partie du code...... là où ça doit lancer l'enregistrement....

 var gain = indicatedSegment.text;
    var data = {gain :gain  };  // {nomvariableaenvoyerenpost : valeur }

Ensuite dans ma page php je doit attribuer le gain via la variable $_POST['gain'] c'est ça ?

Oui

$gain = !empty($_POST['gain']) ? $_POST['gain'] : NULL;

Elle aura pour valeur celle contenue dans

indicatedSegment.text

Je suppose donc que oui....
C'est ton script... tu dois savoir mieux que moi comment il fonctionne non ?

Au pire... tu places des console.log dans ton code pour voir la valeur de tes variables et tu regardes dans la console du navigateur ce que ça t'affiche..... du debogage de javascript basic en gros...

Oui, oui c'était juste pour être sûr.

Merci beaucoup, je vais tester ça et je te redis.

Ma roulette ne tourne plus et elle s'affiche en noir avec ce code :

<?php
include("include/debut.php");
$heure2 = date("H:i");
if(!empty($ID))
{
?>
<link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="roulette.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
		<script src="jquery-3.3.1.min.js"></script>
        <div align="center">
            <h1>Roulette bonjour</h1>
            <p>Bienvenue à toi cher membres de Pokemon Sunshine, Je suis là pour te présenter une roulette qui te fera gagner, soit, objets,</br>
			P$, Sun ou encore un objet très spécial que je te laisse le bonheur de dénicher et de découvrir lequel il s'agit.</br>
			Chaque jour, tu pouras tourner la roulette et tenter de gagner quelque chose.</br><br />
            <?php
function hms($time)
	{
		$time = (60*60*24) - $time;
	
		$heures = floor($time/60/60);
		$minutes = floor($time/60) - ($heures*60);
		$secondes = $time - ($heures*60*60) - ($minutes*60);
		
		return $heures.":".$minutes.":".$secondes;
	}
	$roulette2 = $bdd->query("SELECT * FROM roulette2 WHERE idDresseur = '".$_SESSION['ID']."'");
	if($roulette2->rowCount() != 0)
	{
		$roulette2 = $roulette2->fetch();
		
		if((time() - $roulette2['time']) > (60*60*24))
		{
?>
                            <img id="spin_button" src="spin_off.png" alt="Tourner la roue" onClick="startSpin();" />
		<?php
		}
		else
		{ ?>
			Temps avant la prochaine roulette :<br/>
			<b><span id="tempsroulette2"><?php echo hms(time() - $roulette2['time']); ?></span></b>
			
		<?php } ?>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <div class="power_controls">
                        </div>
                    </td>
                    <td width="438" height="582" class="the_wheel" align="center" valign="center">
                        <canvas id="canvas" width="434" height="434">
                        </canvas>
                    </td>
                </tr>
            </table>
        </div>
        <script>
            // Create new wheel object specifying the parameters at creation time.
            var theWheel = new Winwheel({
                'numSegments'   : 16,   // Specify number of segments.
                'outerRadius'   : 212,  // Set radius to so wheel fits the background.
                'innerRadius'   : 120,  // Set inner radius to make wheel hollow.
                'textFontSize'  : 16,   // Set font size accordingly.
                'textMargin'    : 0,    // Take out default margin.
                'segments'      :       // Define segments including colour and text.
                [
                   {'fillStyle' : '#eae56f', 'text' : '1 MasterBall'},
                   {'fillStyle' : '#89f26e', 'text' : '1000 P$'},
                   {'fillStyle' : '#7de6ef', 'text' : '1 HyperBall'},
                   {'fillStyle' : '#e7706f', 'text' : '1 SuperBall'},
                   {'fillStyle' : '#eae56f', 'text' : '3 Suns'},
                   {'fillStyle' : '#89f26e', 'text' : '1 Pierre Feu'},
                   {'fillStyle' : '#7de6ef', 'text' : '500 P$'},
                   {'fillStyle' : '#e7706f', 'text' : '1 Caninos'},
                   {'fillStyle' : '#eae56f', 'text' : '2000 P$'},
                   {'fillStyle' : '#89f26e', 'text' : '5 PokeBall'},
                   {'fillStyle' : '#7de6ef', 'text' : '1 SuperBall'},
                   {'fillStyle' : '#e7706f', 'text' : '200 Miel'},
                   {'fillStyle' : '#eae56f', 'text' : '50 Miel'},
                   {'fillStyle' : '#89f26e', 'text' : '5 Suns'},
                   {'fillStyle' : '#7de6ef', 'text' : '500 P$'},
                   {'fillStyle' : '#e7706f', 'text' : '1500 P$'}
                ],
                'animation' :           // Define spin to stop animation.
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,
                    'spins'    : 8,
                    'callbackFinished' : alertPrize
                }
            });

            // Vars used by the code in this page to do power controls.
            var wheelPower    = 0;
            var wheelSpinning = false;

            // -------------------------------------------------------
            // Function to handle the onClick on the power buttons.
            // -------------------------------------------------------
            function powerSelected(powerLevel)
            {
                // Ensure that power can't be changed while wheel is spinning.
                if (wheelSpinning == false)
                {
                    // Reset all to grey incase this is not the first time the user has selected the power.
                    document.getElementById('pw1').className = "";
                    document.getElementById('pw2').className = "";
                    document.getElementById('pw3').className = "";

                    // Now light up all cells below-and-including the one selected by changing the class.
                    if (powerLevel >= 1)
                    {
                        document.getElementById('pw1').className = "pw1";
                    }

                    if (powerLevel >= 2)
                    {
                        document.getElementById('pw2').className = "pw2";
                    }

                    if (powerLevel >= 3)
                    {
                        document.getElementById('pw3').className = "pw3";
                    }

                    // Set wheelPower var used when spin button is clicked.
                    wheelPower = powerLevel;

                    // Light up the spin button by changing it's source image and adding a clickable class to it.
                    document.getElementById('spin_button').src = "spin_on.png";
                    document.getElementById('spin_button').className = "clickable";
                }
            }

            // -------------------------------------------------------
            // Click handler for spin button.
            // -------------------------------------------------------
            function startSpin()
            {
                // Ensure that spinning can't be clicked again while already running.
                if (wheelSpinning == false)
                {
                    // Based on the power level selected adjust the number of spins for the wheel, the more times is has
                    // to rotate with the duration of the animation the quicker the wheel spins.
                    if (wheelPower == 1)
                    {
                        theWheel.animation.spins = 3;
                    }
                    else if (wheelPower == 2)
                    {
                        theWheel.animation.spins = 8;
                    }
                    else if (wheelPower == 3)
                    {
                        theWheel.animation.spins = 15;
                    }

                    // Disable the spin button so can't click again while wheel is spinning.
                    document.getElementById('spin_button').src       = "spin_off.png";
                    document.getElementById('spin_button').className = "";

                    // Begin the spin animation by calling startAnimation on the wheel object.
                    theWheel.startAnimation();

                    // Set to true so that power can't be changed and spin button re-enabled during
                    // the current animation. The user will have to reset before spinning again.
                    wheelSpinning = true;
                }
            }

            // -------------------------------------------------------
            // Function for reset button.
            // -------------------------------------------------------
            function resetWheel()
            {
                theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
                theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
                theWheel.draw();                // Call draw to render changes to the wheel.

                document.getElementById('pw1').className = "";  // Remove all colours from the power level indicators.
                document.getElementById('pw2').className = "";
                document.getElementById('pw3').className = "";

                wheelSpinning = false;          // Reset to false to power buttons and spin can be clicked again.
            }

            // -------------------------------------------------------
            // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
            // note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
            // -------------------------------------------------------
            function alertPrize(indicatedSegment)
            {
				var gain = indicatedSegment.text;
				var data = {gain :gain  };  // {nomvariableaenvoyerenpost : valeur }
				var urlFichierAjx = "gain_roulette.php"; // chemin vers le fichier php qui communique avec la bdd
				  $.ajax({ 
						type: "POST",
						url: urlFichierAjx,
						data: data,
						async: true,
						dataType: "json"
				  })
				  .done(function(reponse){
					   //code appelé si tout c'est bien passé dans le fichier php
					  console.log(response);
					  alert('OK');
				  })
				  .fail(function(jqXHR, textStatus){
					 alert(textStatus);
				 });
				}
                // Do basic alert of the segment text. You would probably want to do something more interesting with this information.
                alert("Tu remporte " + indicatedSegment.text);				
            }
        </script>
    <?php }else
{
echo '<b><font color="red">Il faut être connecté pour pouvoir accéder à cette page.<br/><br/></font></b>';
header('Location: http://www.pokemon-sunshine.com/inscription');
  exit();
}}
	include('include/pied_de_page.php');
	?>

Je ne vois pas ou est l'erreur, quelqu'un peut-il m'aider ?

Merci par avance.

Finalement j'ai trouvé l'erreur j'avais mis une accolade en trop que j'ai retiré.

ça fonctionne SAUF que lorsque la roue s'arrête ça me met la pop-up du gain et ensuite ça m'en remet 1 en mettant parsererror, tu peux m'aider ? et le lot ne s'ajoute pas au compte du joueur

ça fonctionne SAUF que lorsque la roue s'arrête ça me met la pop-up du gain et ensuite ça m'en remet 1 en mettant parsererror, tu peux m'aider ? et le lot ne s'ajoute pas au compte du joueur

Ca te remet 1 quoi ? une fenêtre alert ? celle de l'erreur ajax je pense.
Qu'as tu dans la console ?
Qu'as tu dans ton code php ? .. car l'erreur provient de là sans en douter...


NB: Pour débuguer de l'ajax, je te conseille d'utiliser Firefox; l'affichage des appels ajax y est plus clair et plus facile à utiliser.
NB²: un "parseerror" vient très certainement