Prise en compte JS après refresh

hugo41
Javascript

Bonjour,

Actuellement sur un projet d'études, je rencontre le problème suivant :

Sur PC comme sur téléphone il faut recharger la page après son affichage pour que le JS fonctionne. Je souhaiterai savoir comment faire pour que le JS soit prit en compte dès l'affichage de la page et non pas que l'utilisateur ait à recharger la page pour que cela fonctionne
Des idées de pourquoi du comment ? Merci beaucoup

Voici mon code :

<?php 
session_start();
include 'config/verif_session.php';
include 'config/db_config.php';
?>

<!DOCTYPE HTML>
<html lang="fr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
    <title>Projet 2020</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/framework.css">
    <link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-all.min.css">
    <script src="https://js.stripe.com/v3"></script>

    <link rel="manifest" href="_manifest.json" data-pwa-version="set_by_pwa.html">
    <link rel="apple-touch-icon" sizes="180x180" href="app/icons/icon-192x192.png">
</head>

<body class="theme-light" data-background="none" data-highlight="red2">
    <div id="page">
        <div id="page-preloader">
            <div class="loader-main">
                <div class="preload-spinner border-highlight"></div>
            </div>
        </div>

        <?php include 'header.php'; ?>

        <div class="page-content header-clear-medium">

            <div class="content-boxed">
                <div class="content">
                    <h3 class="bolder">Réserver des repas</h3>
                    <p>Ajouter la quantité demandée à chaque produits proposés</p>
                </div>
            </div>
            <div class="content-boxed content-boxed-full">
                <a data-height="150" class="caption round-medium shadow-large bottom-15">
                    <div class="caption-bottom bottom-10 left-20">
                        <h1 class="color-white bolder font-22">Hot dog</h1>
                    </div>
                    <div class="caption-overlay bg-black opacity-60"></div>
                    <div class="caption-bg bg-17"></div>
                </a>
                <div class="content bottom-20">
                    <p class="bottom-15">
                        A small description about your project goes here. Then, you can access the portfolio project to see it in detail.
                    </p>

                    <label style="display: inline; font-size: 20px;">Quantité :</label>
                    <input type="number" id="number" placeholder="Entrez ici une quantité" style="font-size: 20px;"/>

                    <br><a id="checkout-button-sku_G42UujPjPD8Ojm"role="link" class="close-menu button button-center-small button-s shadow-large button-round-small bg-green1-dark">Paiement</a>

                </div>
            </div>

            <div class="landing-footer">
                <span class="center-text color-theme font-12 opacity-70">Copyright <span class="copyright-year"></span>. All rights Reserved</span>
            </div>
        </div>

        <div class="menu-hider"></div>
    </div>

    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/plugins.js"></script>
    <script type="text/javascript" src="scripts/custom.js"></script>

    <script type="text/javascript">

            (function() {
              var stripe = Stripe('pk_test_v32nlFP2yXX');

              var checkoutButton = document.getElementById('checkout-button-sku_G42UujPjPD8Ojm');
              checkoutButton.addEventListener('click', function () {
                // When the customer clicks on the button, redirect
                // them to Checkout.
                var value = parseInt(document.getElementById("number").value, 10);

                stripe.redirectToCheckout({
                  items: [{sku: 'sku_G42UujPjPD8Ojm', quantity: value}],

                  // Do not rely on the redirect to the successUrl for fulfilling
                  // purchases, customers may not always reach the success_url after
                  // a successful payment.
                  // Instead use one of the strategies described in
                  // https://stripe.com/docs/payments/checkout/fulfillment
                  successUrl: 'http://XXXmail/mail_buy_tickets.php',
                  cancelUrl: 'XXX',
                  customerEmail: '<?php echo $_SESSION['email']; ?>' 
                })
                .then(function (result) {
                  if (result.error) {
                    // If `redirectToCheckout` fails due to a browser or network
                    // error, display the localized error message to your customer.
                    var displayError = document.getElementById('error-message');
                    displayError.textContent = result.error.message;
                  }
                });
              });
            })();
    </script>
</body>

Aucune réponse