Pourquoi mon JavaScript ne démarre pas ??
augustin Le 5 septembre 2016 à 14:10 (Édité le 25 janvier 2019 à 17:52)
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);
}
TheOldNoob Le 5 septembre 2016 à 15:05
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/
TheOldNoob Le 5 septembre 2016 à 16:51
Quoi comment ça j'ai rien débug? :(
