Bonjour,
je dois utiliser ces deux codes javascript mais les deux veulent pas cohabiter.
je commente un le deuxième fonctionne bien .vis versa
le premier:
<script type="text/javascript">
$(document).ready(function(){
const buttons = document.querySelectorAll("button");
const currCalc = document.querySelector("#calculation");
const currInput = document.getElementById("inpresult");
const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')'
const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string
const re2 = /\.$/; // RegExp matches dot at the end
let calc = [];
let input = [];
let res;
let intRes = false;
let disCalc = [];
let disResult;
let str;
function onNumber(el) {
// print number, unless user tries to input multiple zeros in the beginning & input-display is full
if (
((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") &&
input.length < 20
) {
input[0] === "0" && !input.includes(".") && el !== "0"
? (input = [])
: input;
input.push(el);
currInput.value = `${input.join("")}`;
}
}
function onClear(el) {
if (el === "c") {
// clear all
calc = [];
input = [];
intRes = false;
res = undefined;
displayCalculation(calc, false);
currInput.value = "";
// console.log(calc, input, negative, intRes, res);
} else if (el === "ce") {
// clear entry (input)
input = [];
currInput.value = "";
} else if (el === "del" && input.length > 0) {
// delete last input character
input.splice(-1);
currInput.value = `${input.join("")}`;
}
}
function onNeg() {
// toggle between ± only if input is not 0
if (input.length !== 0 && eval(input.join("")) !== 0) {
let negative;
input[0] === "-" ? (negative = true) : (negative = false);
// if-condition for display-reasons
if ((!negative && input.length < 20) || negative) {
negative ? input.shift() : input.unshift("-");
currInput.value = `${input.join("")}`;
}
}
}
function onDot() {
// print dot, unless input is already a decimal & condition for display-reasons
if (!input.includes(".") && input.length < 20) {
input.length > 0 ? input.push(".") : input.push("0", ".");
currInput.value = `${input.join("")}`;
}
}
function onOperator(operator) {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? (input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split(""))
: input;
// run only, if input ends with checkRE OR
// calc isn't empty and ends with checkRE => || (calc.length > 0 && checkRE.test(calc))
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// operator in calc
calc.push(operator);
// display current input and calc
displayCalculation(calc, false);
currInput.value = `${input.join("")}`;
}
}
function onEqual() {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split("")
: input;
// run only if input ends with checkRE
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// resolve calculation, only if calc ends with checkRE
if (checkRE.test(calc)) {
res = eval(calc.join(""));
// display calculation and result
displayCalculation(calc, true);
displayResult(res);
}
}
}
function followUp(withIntRes) {
if (withIntRes) {
input = res.toString().split("");
}
calc = [];
res = undefined;
intRes = undefined;
currCalc.innerHTML = `${calc}`;
}
function displayResult(res) {
if (res > 99999999999999999999 || res < -9999999999999999999) {
disResult = "error";
calc = [];
input = [];
res = [];
intRes = false;
displayCalculation([], false);
} else {
disResult = res;
intRes = true;
}
currInput.value = `${disResult}`;
}
function displayCalculation(calcArr, final) {
final ? calcArr.push("=") : calcArr;
str = calcArr.join("");
if (str.length > 30) {
str = str.substr(-29);
disCalc = `…${str}`;
} else {
disCalc = str;
}
currCalc.innerHTML = disCalc;
}
function calculator() {
if (this.className === "number") {
if (intRes) {
followUp(false);
}
onNumber(this.id);
} else if (this.className === "clear") {
onClear(this.id);
} else if (this.id === "negative") {
if (intRes) {
followUp(true);
}
onNeg();
} else if (this.className === "dot") {
if (intRes) {
followUp(false);
}
onDot();
} else if (this.className === "operator") {
if (intRes) {
followUp(true);
}
onOperator(this.id);
} else if (this.className === "equal") {
onEqual();
}
}
buttons.forEach(button => button.addEventListener("click", calculator));
});
</script>
le deuxième
<script type="text/javascript">
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var input = document.getElementById("inpresult");
var inputVal = input.value;
var btnVal = this.innerHTML
// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if(btnVal == 'C') {
input.value = '';
decimalAdded = false;
}
// If eval key is pressed, calculate and display the result
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if(equation)
input.value = eval(equation);
decimalAdded = false;
}
// Basic functionality of the calculator is complete. But there are some problems like
// 1. No two operators should be added consecutively.
// 2. The equation shouldn't start from an operator except minus
// 3. not more than 1 decimal should be there in a number
// We'll fix these issues using some simple checks
// indexOf works only in IE9+
else if(operators.indexOf(btnVal) > -1) {
// Operator is clicked
// Get the last character from the equation
var lastChar = inputVal[inputVal.length - 1];
// Only add operator if input is not empty and there is no operator at the last
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.value += btnVal;
// Allow minus if the string is empty
else if(inputVal == '' && btnVal == '-')
input.value += btnVal;
// Replace the last operator (if exists) with the newly pressed operator
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
input.value = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
}
// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.input.innerHTML
else if(btnVal == '.') {
if(!decimalAdded) {
input.value += btnVal;
decimalAdded = true;
}
}
// if any other key is pressed, just append it
else {
input.value += btnVal;
}
// prevent page jumps
e.preventDefault();
}
}
</script>
Il faudrait que tu nous montres comment tu "mets" ces deux codes ensemble.
Il faudrait également regarder dans la console de ton navigateur si il n'y a pas des erreurs... (lorsque tu mets les deux codes ensemble bien entendu...)
=> Colle nous une capture écran de la console histoire qu'on se fasse notre propre avis...
<style type="text/css">
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Better text styling */
font: bold 14px Arial, sans-serif;
}
/* Finally adding some IE9 fallbacks for gradients to finish things up */
/* A nice BG gradient */
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
/* Using box shadows to create 3D effects */
#calculator {
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
.top span.clear {
float: left;
}
/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 212px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clear floats */
.keys, .top {overflow: hidden;}
/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
.keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}
.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}
.keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}
.top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
</style>
<div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear">C</span>
<div class="screen">
<input type="text" name="qte" id="inpresult" value="" style="font-size: 36px; text-align: left; color: red; font-weight: bold;" >
</div>
</div>
<div class="keys">
<!-- operators and other keys -->
<span>7</span>
<span>8</span>
<span>9</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>0</span>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input onclick="inserer2()" type="button" name="valider" class="btn btn-success btn-block flatbtn" value="Appliquez un pourcentage">
</div>
<div class="col-md-3"></div>
</div>
</div>
<script type="text/javascript">
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var input = document.getElementById("inpresult");
var inputVal = input.value;
var btnVal = this.innerHTML
// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if(btnVal == 'C') {
input.value = '';
decimalAdded = false;
}
// If eval key is pressed, calculate and display the result
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if(equation)
input.value = eval(equation);
decimalAdded = false;
}
// Basic functionality of the calculator is complete. But there are some problems like
// 1. No two operators should be added consecutively.
// 2. The equation shouldn't start from an operator except minus
// 3. not more than 1 decimal should be there in a number
// We'll fix these issues using some simple checks
// indexOf works only in IE9+
else if(operators.indexOf(btnVal) > -1) {
// Operator is clicked
// Get the last character from the equation
var lastChar = inputVal[inputVal.length - 1];
// Only add operator if input is not empty and there is no operator at the last
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.value += btnVal;
// Allow minus if the string is empty
else if(inputVal == '' && btnVal == '-')
input.value += btnVal;
// Replace the last operator (if exists) with the newly pressed operator
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
input.value = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
}
// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.input.innerHTML
else if(btnVal == '.') {
if(!decimalAdded) {
input.value += btnVal;
decimalAdded = true;
}
}
// if any other key is pressed, just append it
else {
input.value += btnVal;
}
// prevent page jumps
e.preventDefault();
}
}
</script>
et
<?php include('calculator.php'); ?>
<form >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<label for="firstName"></label>
<div class="invalid-feedback"></div>
</div>
<div class="col-md-3"></div>
</div>
<br>
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
<input type="text" name="qte" id="inpresult" value="" style="font-size: 36px; text-align: center; color: red; font-weight: bold;" >
<input id="cache" hidden type="text" name="id" value="">
<input id="clef" hidden type="text" name="clef" value="<?php echo $_GET['clef']; ?>">
</div>
</div>
<div class="button-field">
<button type="button" id="c" class="clear" name="clear"><span>c</span></button>
<button type="button" id="ce" class="clear" name="clear-entry"><span>ce</span></button>
<button type="button" id="0" class="number" name="0">0</button>
<button type="button" id="7" class="number" name="7">7</button>
<button type="button" id="8" class="number" name="8">8</button>
<button type="button" id="9" class="number" name="9">9</button>
<button type="button" id="4" class="number" name="4">4</button>
<button type="button" id="5" class="number" name="5">5</button>
<button type="button" id="6" class="number" name="6">6</button>
<button type="button" id="1" class="number" name="1">1</button>
<button type="button" id="2" class="number" name="2">2</button>
<button type="button" id="3" class="number" name="3">3</button>
</div>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input onclick="inserer()" type="button" name="valider" class="btn btn-success btn-block flatbtn" value="Modiffier">
</div>
<div class="col-md-3"></div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
const buttons = document.querySelectorAll("button");
const currCalc = document.querySelector("#calculation");
const currInput = document.getElementById("inpresult");
const checkRE = /(\d|\))$/; // RegExp matches, if last character of string is number or ')'
const re1 = /(0+)$/g; // RegExp matches all 0 at the en of a string
const re2 = /\.$/; // RegExp matches dot at the end
let calc = [];
let input = [];
let res;
let intRes = false;
let disCalc = [];
let disResult;
let str;
function onNumber(el) {
// print number, unless user tries to input multiple zeros in the beginning & input-display is full
if (
((el === "0" && (input[0] !== "0" || input.includes("."))) || el !== "0") &&
input.length < 20
) {
input[0] === "0" && !input.includes(".") && el !== "0"
? (input = [])
: input;
input.push(el);
currInput.value = `${input.join("")}`;
}
}
function onClear(el) {
if (el === "c") {
// clear all
calc = [];
input = [];
intRes = false;
res = undefined;
displayCalculation(calc, false);
currInput.value = "";
// console.log(calc, input, negative, intRes, res);
} else if (el === "ce") {
// clear entry (input)
input = [];
currInput.value = "";
} else if (el === "del" && input.length > 0) {
// delete last input character
input.splice(-1);
currInput.value = `${input.join("")}`;
}
}
function onNeg() {
// toggle between ± only if input is not 0
if (input.length !== 0 && eval(input.join("")) !== 0) {
let negative;
input[0] === "-" ? (negative = true) : (negative = false);
// if-condition for display-reasons
if ((!negative && input.length < 20) || negative) {
negative ? input.shift() : input.unshift("-");
currInput.value = `${input.join("")}`;
}
}
}
function onDot() {
// print dot, unless input is already a decimal & condition for display-reasons
if (!input.includes(".") && input.length < 20) {
input.length > 0 ? input.push(".") : input.push("0", ".");
currInput.value = `${input.join("")}`;
}
}
function onOperator(operator) {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? (input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split(""))
: input;
// run only, if input ends with checkRE OR
// calc isn't empty and ends with checkRE => || (calc.length > 0 && checkRE.test(calc))
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// operator in calc
calc.push(operator);
// display current input and calc
displayCalculation(calc, false);
currInput.value = `${input.join("")}`;
}
}
function onEqual() {
// eliminate redundant 0 from input end(re1), and dot if necessary(re2)
input.join("").includes(".") && re1.test(input.join(""))
? input = input
.join("")
.replace(re1, "")
.replace(re2, "")
.split("")
: input;
// run only if input ends with checkRE
if (checkRE.test(input)) {
// input in calc, dependend if input is negative or not ; then reset input
eval(input.join("")) < 0
? calc.push(`(${input.join("")})`)
: calc.push(`${input.join("")}`);
input = [];
// resolve calculation, only if calc ends with checkRE
if (checkRE.test(calc)) {
res = eval(calc.join(""));
// display calculation and result
displayCalculation(calc, true);
displayResult(res);
}
}
}
function followUp(withIntRes) {
if (withIntRes) {
input = res.toString().split("");
}
calc = [];
res = undefined;
intRes = undefined;
currCalc.innerHTML = `${calc}`;
}
function displayResult(res) {
if (res > 99999999999999999999 || res < -9999999999999999999) {
disResult = "error";
calc = [];
input = [];
res = [];
intRes = false;
displayCalculation([], false);
} else {
disResult = res;
intRes = true;
}
currInput.value = `${disResult}`;
}
function displayCalculation(calcArr, final) {
final ? calcArr.push("=") : calcArr;
str = calcArr.join("");
if (str.length > 30) {
str = str.substr(-29);
disCalc = `…${str}`;
} else {
disCalc = str;
}
currCalc.innerHTML = disCalc;
}
function calculator() {
if (this.className === "number") {
if (intRes) {
followUp(false);
}
onNumber(this.id);
} else if (this.className === "clear") {
onClear(this.id);
} else if (this.id === "negative") {
if (intRes) {
followUp(true);
}
onNeg();
} else if (this.className === "dot") {
if (intRes) {
followUp(false);
}
onDot();
} else if (this.className === "operator") {
if (intRes) {
followUp(true);
}
onOperator(this.id);
} else if (this.className === "equal") {
onEqual();
}
}
buttons.forEach(button => button.addEventListener("click", calculator));
});
</script>
Tu ne nous donnes que des bouts de code...
Il manque tout le reste du html ... les imports JS ...etc...
Donc... donne nous le code complet de la page générée dans le navigateur (je dis bien le code "généré" ... que tu peux récupérer en affichant la page dans ton navigateur puis en en affichant le code source via le raccourci clavier CTRL+U
Si tu mets en commentaire cette ligne et que tu réutilise celle d'avant (qui est en commentaire quelques lignes plus haut, pointant sur le cdn jquery )
Dans le fichier placerModalPourcentage.js
Modifie le comme ceci :
//const links = document.getElementById('tableau').getElementsByTagName('a') ;
function placer(arg){
var idInput = document.getElementById('cache') ;
var qteInput = document.getElementById('inpresult') ;
qteInput.setAttribute('value',arg.textContent) ;
idInput.setAttribute('value',arg.id) ;
}
Ensuite, dans les erreurs affichées dans la console, ça parle de "placer2"
Mais je ne trouve nul-part dans le code que tu nous montres référence à cette fonction (appellées via un onclick visiblement)...
Tu peux éventuellement cliquer sur le "nom du fichier" indiqué dans la console en regard du message d'erreur... ça devrait t'afficher la ligne de code concernée.
Tu peux déjà commencer par corriger ça.
Ensuite,
Dis toi, lorsque tu essayes de regrouper plusieurs codes ensembles :
1- Ne pas utiliser les mêmes noms de fonctions
2 - Ne pas utiliser les mêmes noms de variables à portée "globales". (si tu les déclares à l'intérieur des fonctions cela ne pose pas de souci)
Et si malgré ces ajustements les soucis persistes, recolle nous les éventuels nouveaux messages d'erreurs de la console et donne nous le code de chaque fichier js (en pensant à nous spécifier le nom de chacun )
Bonjour à vous .
il a y une avancée mais quand je sais le chiffres de la calculette, ca ne s'affiche pas dans le input .
partie concernée :
<style type="text/css">
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Better text styling */
font: bold 14px Arial, sans-serif;
}
/* Finally adding some IE9 fallbacks for gradients to finish things up */
/* A nice BG gradient */
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
/* Using box shadows to create 3D effects */
#calculator {
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
.top span.clear {
float: left;
}
/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 212px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clear floats */
.keys, .top {overflow: hidden;}
/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
.keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}
.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}
.keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}
.top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
</style>
<div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear">C</span>
<div class="screen">
<input type="text" name="qte" id="inpresult2" value="" style="font-size: 36px; text-align: left; color: red; font-weight: bold;" >
<input id="cache2" hidden type="text" name="id" value="">
<input id="clef" hidden type="text" name="clef" value="<?php echo $_GET['clef']; ?>">
</div>
</div>
<div class="keys">
<!-- operators and other keys -->
<span>7</span>
<span>8</span>
<span>9</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>0</span>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input onclick="inserer2()" type="button" name="valider" class="btn btn-success btn-block flatbtn" value="Appliquez un pourcentage">
</div>
<div class="col-md-3"></div>
</div>
</div>
<script type="text/javascript">
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var input = document.getElementById("inpresult");
var inputVal = input.value;
var btnVal = this.innerHTML
// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if(btnVal == 'C') {
input.value = '';
decimalAdded = false;
}
// If eval key is pressed, calculate and display the result
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if(equation)
input.value = eval(equation);
decimalAdded = false;
}
// Basic functionality of the calculator is complete. But there are some problems like
// 1. No two operators should be added consecutively.
// 2. The equation shouldn't start from an operator except minus
// 3. not more than 1 decimal should be there in a number
// We'll fix these issues using some simple checks
// indexOf works only in IE9+
else if(operators.indexOf(btnVal) > -1) {
// Operator is clicked
// Get the last character from the equation
var lastChar = inputVal[inputVal.length - 1];
// Only add operator if input is not empty and there is no operator at the last
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.value += btnVal;
// Allow minus if the string is empty
else if(inputVal == '' && btnVal == '-')
input.value += btnVal;
// Replace the last operator (if exists) with the newly pressed operator
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
input.value = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
}
// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.input.innerHTML
else if(btnVal == '.') {
if(!decimalAdded) {
input.value += btnVal;
decimalAdded = true;
}
}
// if any other key is pressed, just append it
else {
input.value += btnVal;
}
// prevent page jumps
e.preventDefault();
}
}
</script>
Je t'ai indiqué de regarder dans la console (mais tu sembles avoir du mal à comprendre ce qu'on te dit... )
par ce que... ben..... oui... il y a bien un message d'erreur qui dit que la variable input est inconnue
à la ligne
30 janv. 2019 à 22:05
avec :
et
voici le capture de la console
30 janv. 2019 à 23:28
Il manque tout le reste du html ... les imports JS ...etc...
Donc... donne nous le code complet de la page générée dans le navigateur (je dis bien le code "généré" ... que tu peux récupérer en affichant la page dans ton navigateur puis en en affichant le code source via le raccourci clavier CTRL+U
30 janv. 2019 à 23:36
30 janv. 2019 à 23:40
es tu sûr que le chemin que tu as indiqué est le bon ? à savoir :
Si tu mets en commentaire cette ligne et que tu réutilise celle d'avant (qui est en commentaire quelques lignes plus haut, pointant sur le cdn jquery )
qu'est-ce que ça donne ?
Ah.. et il nous faudrait aussi le code du fichier
placerModalPourcentage.js
30 janv. 2019 à 23:58
, les modals fonctionnent plus, les liens fonctionnent plus.
voici placerModalPourcentage.js
la console affiche