Pourquoi mon JavaScript ne démarre pas ??

Suivre ce topic
Ce topic est suivi par : Personne...
augustin

augustin Le 5 septembre 2016 à 14:10 (Édité le 25 janvier 2019 à 17:52)

Bonjour,

Je suis entrain d'apprendre JavaScript en faisant des petits scripts sur codepen.io
là je voulais apprendre à faire ce genre d'exercice https://codepen.io/engza/pen/vjhab

Mais bizarrement le script en JavaScript ne démarre pas ???
J'ai deux fichiers, un fichier html et un fichier javascript

 accueil.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->

    <script src="mon-script.js"></script>
    
    
    
    <div class="wrapper">
    <div class="Intro"> There is a $25 fee for each person going. A youth t-shirt costs $10 and an adult t-shirt costs $12. The following form adds them together for a total.</div>
    <div id="total_attending">
        <div id="number_adults_wrapper" class="g one-half field_number_adults">
            <p>
                <label for="Number of adult family members:*">Number of adult family members:*</label>
                <select name="number_adults">
                    <option value="0">Select...</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </p>
        </div>
        <div id="number_children_wrapper" class="g one-half field_number_children">
            <p>
                <label for="Number of children:*">Number of children:*</label>
                <select name="number_children">
                    <option value="0">Select...</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
            </p>
        </div>
    </div>
    <div id="tshirt_qty">
        <div id="y_qty">
            <div id="tshirt_ysmall_wrapper" class="g one-third field_tshirt_ysmall">
                <p>
            <label for="tshirt_ysmall">Youth Small</label>
            <input name="tshirt_ysmall" type="text" id="tshirt_ysmall">
          </p>
            </div>
            <div id="tshirt_ymedium_wrapper" class="g one-third field_tshirt_ymedium">
                <p>
            <label for="tshirt_ymedium">Youth Medium</label>
            <input name="tshirt_ymedium" type="text" id="tshirt_ymedium">
          </p>
            </div>
            <div id="tshirt_ylarge_wrapper" class="g one-third field_tshirt_ylarge">
                <p>
            <label for="tshirt_ylarge">Youth Large</label>
            <input name="tshirt_ylarge" type="text" id="tshirt_ylarge">
          </p>
            </div>
        </div>
        <div id="a_qty">
            <div id="tshirt_asmall_wrapper" class="g one-third field_tshirt_asmall">
                <p>
            <label for="tshirt_asmall">Adult Small</label>
            <input name="tshirt_asmall" type="text" id="tshirt_asmall">
          </p>
            </div>
            <div id="tshirt_amedium_wrapper" class="g one-third field_tshirt_amedium">
                <p>
            <label for="tshirt_amedium">Adult Medium</label>
            <input name="tshirt_amedium" type="text" id="tshirt_amedium">
          </p>
            </div>
            <div id="tshirt_alarge_wrapper" class="g one-third field_tshirt_alarge">
                <p>
            <label for="tshirt_alarge">Adult Large</label>
            <input name="tshirt_alarge" type="text" id="tshirt_alarge">
          </p>
            </div>
            <div id="tshirt_axlarge_wrapper" class="g one-third field_tshirt_axlarge">
                <p>
            <label for="tshirt_axlarge">Adult X-Large</label>
            <input name="tshirt_axlarge" type="text" id="tshirt_axlarge">
          </p>
            </div>
            <div id="tshirt_axxlarge_wrapper" class="g one-third field_tshirt_axxlarge">
                <p>
            <label for="tshirt_axxlarge">Adult XX-Large</label>
            <input name="tshirt_axxlarge" type="text" id="tshirt_axxlarge">
          </p>
            </div>
            <div id="tshirt_axxxlarge_wrapper" class="g one-third field_tshirt_axxxlarge">
                <p>
            <label for="tshirt_axxxlarge">Adult XXX-Large</label>
            <input name="tshirt_axxxlarge" type="text" id="tshirt_axxxlarge">
          </p>
            </div>
        </div>
    </div>
    <div id="reg_calc_wrapper" class="g one-whole field_reg_calc">
        <div class="field_reg_calc">
            <h4 class="no_bdr_hdr">
                <div>People
            <span id="p_sum"></span>
          </div>
                <div>Youth Shirts
            <span id="y_sum"></span>
          </div>
                <div>Adult Shirts
            <span id="a_sum"></span>
          </div>
                <div class="fam_reg_calc">Total
            <span id="sumsum"></span>
          </div>
            </h4>
        </div>
    </div>
</div>
  </body>
</html>


 mon-script.js
// Cost Calc
$(function () {
    // Finds All Selects
    $("select").each(function () {
        $(this).change(function () {
            calculateSum();
        });
    });

    // Finds All Inputs
    $("input").each(function () {
        $(this).keyup(function () {
            calculateSum();
        });
    });
});

function calculateSum() {
var psum = 0; // Total People
var ysum = 0; // Total Youth Shirts
var asum = 0; // Total Adult Shirts
var sum = 0; // Total Youth & Adult Shirts

// Total People - Finds which selects to capture & assigns values to variable
$("#total_attending select").each(function () {
    if (!isNaN(this.value) && this.value.length != 0) {
        psum += parseFloat(this.value);
    }
});

// Total Youth Shirts - Finds which inputs to capture & assigns values to variable
$("#y_qty input").each(function () {
    if (!isNaN(this.value) && this.value.length != 0) {
        ysum += parseFloat(this.value);
    }
});

// Total Adult Shirts - Finds which inputs to capture & assigns values to variable
$("#a_qty input").each(function () {
    if (!isNaN(this.value) && this.value.length != 0) {
        asum += parseFloat(this.value);
    }
});

// Total Youth & Adult Shirts - Find which inputs to capture & assigns values to variable
$("#tshirt_qty input").each(function () {
    if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
    }
});

// Print each variable to span with respective id
$("#p_sum").html(psum);
$("#y_sum").html(ysum);
$("#a_sum").html(asum);
//$("#sum").html(sum);    <-- Not Needed for current application

// Perform Calculations
var pcost = psum * 25;
var ycost = ysum * 10;
var acost = asum * 12;
var sumsum = pcost + ycost + acost;

// Print results of calculations to span with respective id
$("#sumsum").html('Est-ce que chez vous ça fonctionne ???
 + sumsum);
}
Est-ce que chez vous ça fonctionne ???
TheOldNoob

TheOldNoob Le 5 septembre 2016 à 15:05

Salut l'ami,
Alors, je suis completement larguer en js, mais je vais m'y remettre un jour !

Cela dit pour ton problème, je dirais que ton code, c'est du jQuery et non du js pure, du coup, je vois pas dans ton code ou est-ce que tu charge la librerie jQuery. Sans ton fichier jQuery.js ton code ne fonctionnera jamais.


https://jquery.com/download/
augustin

augustin Le 5 septembre 2016 à 16:32

Salut TheHoldNoob

Merci pour le tuyau ça fonctionne maintenant 😉
TheOldNoob

TheOldNoob Le 5 septembre 2016 à 16:51

super, je suis pas trop naze en js/jq


Quoi comment ça j'ai rien débug? :(
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte