Sujet Précédent Sujet Suivant

Comment utiliser les deux code javascript

Résolu
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 - 30 janv. 2019 à 17:59
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 - 31 janv. 2019 à 14:19
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>

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
30 janv. 2019 à 18:18
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...

0
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
30 janv. 2019 à 22:05
Voici ou se situe les deux code js 
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			<h3 class="modal-title" id="lineModalLabel">Réduction de cout</h3>
		</div>
		<div class="modal-body">
			
            <!-- content goes here -->
		<?php  include('modalPourcentage.php'); ?>

		</div>
		<div class="modal-footer">
			<div class="btn-group btn-group-justified" role="group" aria-label="group button">
				<div class="btn-group" role="group">
					<button type="button" class="btn btn-default" data-dismiss="modal"  role="button">Close</button>
				</div>
				<div class="btn-group btn-delete hidden" role="group">
					<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal"  role="button">Delete</button>
				</div>
				<div class="btn-group" role="group">
					<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button"></button>
				</div>
			</div>
		</div>
	</div>
  </div>
</div>





<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
        <div class="loginmodal-container">
          <?php include('calculator.php'); ?>
     
        </div>
  </div>
</div>


avec 
<?php  include('modalPourcentage.php'); ?>
: 
    <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>


voici le capture de la console
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
30 janv. 2019 à 23:28
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
0
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
30 janv. 2019 à 23:36
en faisant CTR +U : 


  

            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>FACTURA</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--  
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  -->  
    <link href="css/template/maxcdn.bootstrapcdn.com.bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/stackpath.bootstrapcdn.com.font.awesome.4.7.0.css.font.awesomemin.css">
    
    <script src="js/template/code.jquery.jquery-1.11.1.min.js"></script>
   
    
        <script>
function popupCenter(url, title, w, h, t) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+t+', left='+left);
} 
</script>
<script>
function confirmDelete(delUrl) {
if (confirm("Voulez vous vraiment supprimer cette famille ?")) {
document.location = delUrl;
}
}
</script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script language="javascript">
function ouvre_popup(page) {
window.open(page,"nom_popup","menubar=no, status=no, scrollbars=yes,  width=2480, height=3508");
}
</SCRIPT>
</head>
<body>

  <script src="js/template/maxcdn.bootstrapcdn.bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
              <nav class="navbar navbar-inverse navbar-fixed-top" id="jntopnav">
  
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="images/LOGO_GLOBAL_AEITok3Petit.jpg" width="20" height="20"></a>
      <a class="navbar-brand" href="siteWeb/site_web.php?clef=bc01Tm89">FACTURA</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#" style="color: yellow">MAG : GTS</a></li>
        <li><a href="index.php?page=ACCUEIL">Accueil</a></li>
        
        <li><a href="#" class="active">SI</a></li>
        <li><a href="#">Aide</a></li>
        <li><a href="index.php?page=sms">SMS</a></li>
        <li><a href="index.php?page=CODEBAR">Code Barre</a></li>
        <li><a href="#">Contacts</a></li>
        <li>
          <IFRAME id=membres title=membres frameBorder=0 width=1 height=1    scrolling=yes name=membres src="code/update_seuil.php" marginWidth=0 marginHeight=0>
           </IFRAME>
        </li>
         <li>
               <a data-toggle="tooltip"  data-placement="right" title="Alerte reservation" onclick="popupCenter('index.php?page=list_facture&id_reser=reserv&status=1', 'myPop1',960,600,5);" href="javascript:void(0);"  > <span class="glyphicon glyphicon-time"></span> 0</a>

        </li>

        <li>
               <a data-toggle="tooltip" data-placement="right" title="Stock Bas" onclick="popupCenter('index.php?page=valeurstock&vals=1', 'myPop1',960,600,5);" href="javascript:void(0);" ><span class="glyphicon glyphicon-warning-sign" style="color: white"></span><span class="badge" style="color: red; background-color: white">2</span></a>

        </li>
         <li>
          <!--
          <IFRAME id=membres title=membres frameBorder=0 width=1 height=1    scrolling=yes name=membres src="code/envoi_sms_client.php" marginWidth=0 marginHeight=0>
           </IFRAME>
         -->
        </li>

         <li>
          
          <IFRAME id=membres title=membres frameBorder=0 width=1 height=1    scrolling=yes name=membres src="code/UpdateValeurStock.php" marginWidth=0 marginHeight=0>
           </IFRAME>
         
        </li>
          <li>
               <a data-toggle="tooltip" data-placement="right" title="sms" onclick="popupCenter('code/envoi_sms_client.php', 'myPop1',960,600,5);" href="javascript:void(0);" ><span class="glyphicon glyphicon-warning-sign" style="color: white"></span><span class="badge" style="color: white; background-color: red">
           37/15=-22              
            </span></a>

        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
         <li><a href="code/portable.php?pc=1">Portable</a></li>
        <li><a href="chicsape_codebar.com/index.php?page=ACCUEIL" style="color: #F60;">Ancienne Interface</a></li>
        <li><a href="index.php?page=licence">Licence</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <img src="avatar/jolie.jpg" alt=""  width="25" height="25">admin <span class="caret"></span></a>
          <ul class="dropdown-menu">

           
            <li><a href="#">Another action</a></li>
            <li><a href="index.php?page=update">Modifier mon Compte</a></li>
            <li><a href="index.php?page=change_magasin_2">Changer de magasin</a></li>

            <li role="separator" class="divider"></li>
            <li><a href="index.php?page=modiff_pass">Change mot de passe</a></li>

                       <li><a href="index.php?page=fermer&ferm=1" style="color: #F60">Fermeture de caisse</a></li>
                      <li><a href="index.php?page=logout"  style="color: red"><i class="fa fa-sign-out pull-right"></i> Se Deconnecter</a></li>
                    </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>         <nav class="navbar navbar-default navbar-fixed-top" id="jntopsubnav">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
   
       <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Recherche <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="index.php?page=compteClient">Recherche Compte client</a></li>
          <li><a href="index.php?page=search_0">Recherche Une créance</a></li>
          <li><a href="index.php?page=ble">Saisir Versement</a></li>
                      <li><a href="index.php?page=Bilan_du_jour_caisse">Bilan du jour</a></li>
            <li><a href="index.php?page=Bilan_periode_caisse">Bilan par période</a></li>
                   </ul>
      </li>

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Saisie <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="index.php?page=NOUVEAU&clef=ad1AT4k9">Caisse</a></li>
          
        </ul>
      </li>
  


    
   

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fichier <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="index.php?page=ajout_cat_article">Ajouter un article</a></li>
          <li><a href="index.php?page=ajout_compt_fourn">Créer Compte fournisseur</a></li>
          <li><a href="index.php?page=ajout_compt_livreur">Créer Compte Livreur</a></li>
          <li><a href="index.php?page=enreg_ptit_caisse">Alimenter Petite Caisse</a></li>
          <li><a href="index.php?page=ajout_versement">Saisie Lieu Versement</a></li>
          <li><a href="index.php?page=ble">Saisie Versement</a></li>
          <li><a href="index.php?page=LesSortie">Saisie Sortie d'argent</a></li>
           <li><a href="index.php?page=ptitecaisse"> Sortie petite Caisse</a></li>
           <li><a href="index.php?page=articles_mank"> Saisir articles manquants</a></li>
           <li><a href="index.php?page=list_facture_0"> Enregistrer un client</a></li>
           <li><a href="index.php?page=depenser_0"> Effectuer une depense</a></li>
           <li><a href="index.php?page=bulletin_salaire_0"> Enregistrer salaire</a></li>
           <li><a href="index.php?page=enreg_pers"> Enregistrer personnel</a></li>
        </ul>
      </li>
 
    
   
      <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">États <span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-lg row">
        	<li class="col-sm-3">
            <ul>
              <li class="dropdown-header">Fourniseur</li>
              <li><a href="index.php?page=list_fourn">Consulter</a></li>
              
              <li class="dropdown-header">LIvreur/Serveur</li>
              <li><a href="index.php?page=list_livreur">Consulter</a></li>

              <li class="dropdown-header">Bilan</li>
              <li><a href="index.php?page=EDITION">Afficher</a></li>
            </ul>
        </li>
         <li class="col-sm-3">
            <ul>
              <li class="dropdown-header">Client</li>
              <li><a href="index.php?page=list_clients">Liste des client</a></li>
              <li><a href="index.php?page=situation_cl">Situation des Clients</a></li>
              <li><a href="index.php?page=list_clients_priv">Liste clients Prestiges</a></li>
              <li><a href="index.php?page=anniv">Anniversaire</a></li>
              <li><a href="index.php?page=prospections">Liste des prospections</a></li>

               <li class="dropdown-header">Produits</li>
              <li><a href="#">Liste des familles</a></li>
              <li><a href="#">Liste des sous-famille</a></li>
              <li><a href="index.php?page=printToutStockProduit">liste des produits</a></li>
            </ul>
        </li>
         <li class="col-sm-3">
            <ul>
              <li class="dropdown-header">Livraison</li>
              <li><a href="index.php?page=list_livraisons">Liste des Livraisons</a></li>
              <li><a href="index.php?page=EDITION&liv=1">Recherche de Livraison</a></li>
              <li><a href="index.php?page=archiveliv">Livraisons Archivées</a></li>

              <li class="dropdown-header">En ligne</li>
              <li><a href="index.php?page=onlineCmd">Liste des commandes</a></li>
              <li><a href="index.php?page=onlineCmdArchive">Liste des commandes Archivées</a></li>
            </ul>
        </li>
            <li class="col-sm-3">
            <ul>
              <li class="dropdown-header">Historique</li>
              <li><a href="index.php?page=historiques">Historique</a></li>
              <li><a href="index.php?page=fact_suppr">Historique Factures supprimées</a></li>
            </ul>
        </li>
            <li class="col-sm-3">
            <ul>
              <li class="dropdown-header">Point de caisse</li>
              <li><a href="index.php?page=point_caisse">Afficher Point de caisse</a></li>
              <li class="dropdown-header">Sortie d'argent</li>
              <li><a href="index.php?page=aff_sorties">Sortie d'argent</a></li>
            </ul>
        </li>
        </ul>
      </li>
		<li class="dropdown dropdown-lg">

        <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Facturation <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Bordereaux</li>
          <li><a onclick="popupCenter('print/printBorderau_0.php', 'myPop1',1500,600,5);" href="javascript:void(0);" >Gestion des Bordereaux</a></li>
          <li class="dropdown-header">Facturation</li>
          <li><a href="index.php?page=list_facture">Liste des factures</a></li>
          <li><a href="index.php?page=list_facture&id_reser=reserv">Liste Reservations</a></li>
          <li><a href="index.php?page=list_facture&id_prof=proforma">Liste Factures Pro-forma</a></li>
          <li class="dropdown-header">Compta</li>
          <li class="dropdown-header">Vente en Ligne</li>
          <li><a href="index.php?page=list_facture&id_online=online">Liste des produits en ligne</a></li>
        </ul>
      </li>
       
 <li>
   
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cuisine <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Creez menu Cuisine</li>
          <li><a href="index.php?page=menucuisine">Entrée menu</a></li>
          <li><a href="index.php?page=bonusNombre">Entrez nombre de points</a></li>
          <li class="dropdown-header">Commandes</li>
          <li><a href="index.php?page=CAISSE_CUISINE">Commandes</a></li>
          <li><a href="index.php?page=CUISINE">Ecran Cuisine</a></li>
        </ul>
      </li>
          
   
         
      <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stock <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Entrée</li>
                    <li><a href="index.php?page=STOCK">Approvisionnement</a></li>
                  <li><a href="index.php?page=sttockCodeBar">Entrée en stock Code Bar</a></li>
          <li><a href="index.php?page=stock_status_peremption">Entrée Stock|Péremtion</a></li>
          <li class="dropdown-header">Articles</li>
          <li><a href="index.php?page=ajout_cat_article">Ajouter un article</a></li>
          <li><a href="index.php?page=edit_produit">Edition de produits</a></li>
          <li class="dropdown-header">Gestion des Seuil</li>
          <li><a href="index.php?page=harmonie_seuil">harmoniser</a></li>
          <li class="dropdown-header">Gestion Inventaire</li>
           <li><a href="print/printHistStockPlus.php">Historique de Stock</a></li>
          <li><a href="index.php?page=inventaire2">Inventaire</a></li>
          <li><a href="index.php?page=valeurstock">Valeur de Stock</a></li>
          <li><a href="index.php?page=invent_detail">Infos Inventaires</a></li>
          <li><a href="print/printHistStock.php">Historiques Inventaires</a></li>
          <li class="dropdown-header">Gestion Des Prosuits défaillants</li>
           <li><a href="index.php?page=articleDetruits">Afficher</a></li>

        </ul>
      </li>
      



 
      <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Configuration <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li class="dropdown-header">Choix d'interface</li>
          <li><a href="index.php?page=interfaces">Entrer</a></li>
          <li class="dropdown-header">Config</li>
          <li><a href="index.php?page=setting">Entrer</a></li>
          <li class="dropdown-header">Config couleur</li>
          <li><a href="index.php?page=setting_font">Entrer</a></li>
        </ul>
      </li>


      <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Utilitaires <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="index.php?page=cree_entreprise">Créer un Entreprise</a></li>
          <li><a href="index.php?page=ajout_depot">Créer un Dépot</a></li>
          <li><a href="index.php?page=upl&t=logo">Charger Logo</a></li>
          <li><a href="index.php?page=nom_dg_fact">Créer nom DG</a></li>
          <li><a href="index.php?page=pied_de_page">Créer Bas de page Facture</a></li>
          <li><a href="index.php?page=haut_de_page">Créer Haut de page Facture</a></li>
          <li><a href="index.php?page=mt_prestige">Créer Montant Prèstige</a></li>
          <li><a href="index.php?page=ajout_priv">Créer Privilège</a></li>
          <li><a href="index.php?page=ajout_depense">Créer Dépenses</a></li>
          <li><a href="index.php?page=polices">Créer Police de texte</a></li>
          <li><a href="index.php?page=ajout_couleur">Créer Couleur</a></li>
          <li><a href="index.php?page=ajout_marque">Créer Marque</a></li>
          <li><a href="index.php?page=limit_remise">Limite Remise</a></li>
        </ul>
      </li>

         <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="index.php?page=register">Créer un utilisateur</a></li>
          <li><a href="index.php?page=membre">Membres</a></li>
                  </ul>
      </li>

    </ul>
    <form class="navbar-form navbar-right">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" id="searchtemp">
      </div>
      <button type="submit" class="btn btn-default" style="display: none">Submit</button>
    </form>
  </div>
</nav>  




<div class="container-fluid" style="padding-top: 101px; font-size:18px"> 
    <div class="row">
        <div class="col-md-12">
              
  

<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
/* <![CDATA[ */
function mensualite()
{
k = document.forms['form'].elements['mtremi'].value;
t = document.forms['form'].elements['total'].value;
n = document.forms['form'].elements['monnai_remi'].value;
r = document.forms['form'].elements['tot_remise'].value;
	if(r!=0){
			                j=k-n;
							m=j-r;
							m=Math.floor(m*100)/100;
							if(m>=0){
								    	document.forms['form'].elements['avoir'].value = m;
									}else{
								           document.forms['form'].elements['avoir'].value = 0;
							             }
			}else{
				 if(n!=''){
							j=k-n;
							m=j-t;
							m=Math.floor(m*100)/100;
							if(m>=0){
								    	document.forms['form'].elements['avoir'].value = m;
									}else{
								           document.forms['form'].elements['avoir'].value = 0;
							             }
						  }
							else
							{
							document.forms['form'].elements['avoir'].value = '';
							}
				}
 }
/* ]]> */
</script>

<script type="text/javascript">
/* <![CDATA[ */
function mensualites()
{
k = document.forms['form'].elements['mtremi'].value;
t = document.forms['form'].elements['total'].value;
x = document.forms['form'].elements['monnai'].value;
r = document.forms['form'].elements['tot_remise'].value;
if(r!=''){
	    x=k-r;
		x=Math.floor(x*100)/100;
		document.forms['form'].elements['monnai'].value = x;
	}else
if(t!='')
{
x=k-t;
x=Math.floor(x*100)/100;
document.forms['form'].elements['monnai'].value = x;
}
else
{
document.forms['form'].elements['monnai'].value = '';
}
}
/* ]]> */
</script>
<!-- **********************************                      ********************************** --><!-- ****************************************CALCUL DE POURCENTAGE********************************** -->
<!-- **********************************                      ********************************** -->
<script type="text/javascript">
/* <![CDATA[ */
function mensualitees()
{

e = document.forms['form'].elements['total'].value;
f = document.forms['form'].elements['remise'].value;//testresutat
if(f!='')
{
g=e*f/100;
z=e-g;
h=Math.floor(z*100)/100;
document.forms['form'].elements['tot_remise'].value = h;

}
else
{
document.forms['form'].elements['tot_remise'].value = '';
}
}
/* ]]> */
</script>
<script language="javascript">
function ouvre_popup(page) {
window.open(page,"nom_popup","menubar=no, status=no, scrollbars=yes,  width=2480, height=3508");
}
</SCRIPT>
<script>
function popupCenter(url, title, w, h, t) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+t+', left='+left);
} 
</script>
<style type="text/css">
#ligne_bleu{
display:none;
}
</style>
<link href="css/cmdTabletteModal.css" rel="stylesheet">
<link href="css/cmdTabletteModalPourc.css" rel="stylesheet">

  <form  id="form"  action="" method="post">
   <table class="table" border="0">
 
         <tr>
       <td width="255">CAISSIERE : admin</td>
       <td width="341"></td>
       <td> </td>
       <td width="300" colspan="3"> <form id="form1" name="form1" method="post" action="">
  <div class="row">
  <div class="col-md-1 mb-2"></div>

                <div class="col-md-7 mb-3">
                                      <label for="firstName">ENTREZ CODE</label>
                                                        <input type="text" name="code" class="form-control" id="firstName" placeholder="CODE ..."  >
                                    <div class="invalid-feedback col-md-2"></div>
                </div>
  
                <div class="col-md-3 mb-3">
                  <label for="lastName"></label>
                  <input style="padding-top: 5px" class="form-control btn btn-primary btn-lg  btn-block" type="submit" name="submitcode" value="VALIDER LE CODE">
                  <div class="invalid-feedback"></div>
                </div>
  </div>
  </form></td>
     </tr>
     <tr>
     <td colspan="2" align="left">
       <table id="tableau" width="100%" border="0">
  <tr style="background-color:#CCC">
    <td>#</td>
    <td>Designation</td>
    <td align="center">%</td>
    <td align="center">P.u</td>
    <td align="center">Qte</td>
    <td align="right">Total</td>
    <td> </td>
  </tr>
    <tr>
    <td colspan="7" style="color:#900; text-align:center; font-style:italic">AUCUNE VENTE POUR CE TICKET</td>
  </tr>
</table>




<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			<h3 class="modal-title" id="lineModalLabel">Réduction de cout</h3>
		</div>
		<div class="modal-body">
			
            <!-- content goes here -->
		    <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>
		</div>
		<div class="modal-footer">
			<div class="btn-group btn-group-justified" role="group" aria-label="group button">
				<div class="btn-group" role="group">
					<button type="button" class="btn btn-default" data-dismiss="modal"  role="button">Close</button>
				</div>
				<div class="btn-group btn-delete hidden" role="group">
					<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal"  role="button">Delete</button>
				</div>
				<div class="btn-group" role="group">
					<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button"></button>
				</div>
			</div>
		</div>
	</div>
  </div>
</div>





<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
        <div class="loginmodal-container">
          <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="a0AzT2U8">


          </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>     
        </div>
  </div>
</div>
     </td>
     <td colspan="4" align="right"><table width="760" border="0" style="font-weight:bold">
       <tr>
         <td width="212" style=" color:#000">MONTANT TOTAL A PAYER </td>
         <td bgcolor="#CCCCCC" width="227"><input type="text" name="total"  id="total"  value = "" style="background-color:#03C;font-size:40px; font-weight:bold; width:200px; color:white; text-align:right"/>
           F</td>
         <td bgcolor="#CCCCCC" width="108"><a href="#" style="text-decoration:none; color:#DD4800">Remise T</a></td>
         </tr>
       <tr>
         <td style=" color:#000">% REMISE </td>
         <td bgcolor="#CCCCCC"><input type="text" name="remise" id="remise" style="background-color:#FFF;font-size:36px; font-weight:bold; width:200px; color:red;text-align:right"  onkeyup="mensualitees();" /></td>
         <td bgcolor="#CCCCCC"> </td>
       </tr>
       <tr>
         <td style=" color:#000">TOTAL APRES REMISE</td>
         <td bgcolor="#CCCCCC"><input type="text" name="tot_remise" id="tot_remise"   value = "" style="background-color:#F90;font-size:36px; width:200px;text-align:right; color:white "/>
           F</td>
         <td bgcolor="#CCCCCC"> </td>
       </tr>
       <tr>
         <td width="212" style=" color:#000">MONTANT RECU </td>
         <td colspan="2" bgcolor="#CCCCCC"><input type="text" name="mtremi" id="mtremi" style="background-color:#300;font-size:36px; color:white; font-weight:bold; width:200px;text-align:right"  onkeyup="mensualites();" />
           F</td>
         </tr>
       <tr>
         <td style=" color:#000">MONNAIE</td>
         <td colspan="2" bgcolor="#CCCCCC"><input type="text" name="monnai" id="monnai" style="background-color:#9F3;font-size:36px; font-weight:bold; width:200px;text-align:right"  />
         F</td>
       </tr>
       <tr>
         <td width="212" style=" color:#000">MONNAIE RENDUE <span style="font-size:10px; color:red"></span></td>
         <td colspan="2" bgcolor="#CCCCCC"><input type="text" name="monnai_remi" id="monnai_remi" onkeyup="mensualite();" style="background-color:#FFF;font-size:36px; font-weight:bold; width:200px;text-align:right"/>
           F</td>
         </tr>
       <tr>
         <td width="212" style=" color:#000">AVOIR</td>
         <td colspan="2" bgcolor="#CCCCCC"><input type="text" name="avoir"  id="avoir" style="background-color:#FFF;font-size:36px; font-weight:bold; width:200px;text-align:right"  />
           F</td>
         </tr>
         
         
       <tr>
         <td style=" color:#400000">DATE</td>
         <td colspan="2" bgcolor="#CCCCCC"><input type="text" name="date_vente"  id="date_vente" style="background-color:#FFF;font-size:16px; font-weight:bold; width:200px; text-align:center" value="30/01/2019"  /></td>
         </tr>
        <tr>
         <td style=" color:#400000"> </td>
         <td colspan="2" bgcolor="#CCCCCC"><table width="514" border="0">
           <tr>
             <td width="33"><input type="checkbox" name="compte" id="compte" value="1" /></td>
             <td width="173" style="font-size:16px; font-weight:bold;">Deduire de mon Compte</td>
             <td width="29"><a onclick="popupCenter('index.php?page=aideCompte', 'myPop1',960,600,10);" href="javascript:void(0);"><img src="images/aide.png" width="15" height="15" /></a></td>
             <td width="29"><input type="checkbox" name="monavoir" id="monavoir" value="1" /></td>
             <td width="183" style="font-size:16px; font-weight:bold;">Ajouter Avoir a mon compte</td>
           </tr>
         </table></td>
       </tr>
       <tr>
         <td style=" color:#400000"> </td>
         <td colspan="2" bgcolor="#CCCCCC"><table width="513" border="0">
           <tr>
             <td width="24"><input type="checkbox" name="proforma" id="proforma" value="1" /></td>
             <td width="136" style="font-size:16px; font-weight:bold;">Facture proforma ?</td>
             <td width="28"><input type="checkbox" name="reservation" id="reservation" value="1" /></td>
             <td width="95" style="font-size:16px; font-weight:bold;">Reservation</td>
             <td width="208" style="font-size:16px; font-weight:bold;"> </td>
           </tr>
         </table></td>
       </tr>
       <tr>
         <td style=" color:#400000"> </td>
         <td colspan="2" bgcolor="#CCCCCC"><table width="517" border="0">
           <tr>
             <td width="20"><input type="checkbox" name="livraison" id="livraison" value="1" /></td>
             <td width="175">Destiné à être Livré ?</td>
             <td width="30"><input type="checkbox" name="livComptant" id="livComptant" value="0" /></td>
             <td width="102">Payé comptant</td>
             <td width="25"><input type="checkbox" name="livComptant" id="livComptant" value="1" /></td>
             <td width="139">Payé à la Livraison</td>
           </tr>
         </table></td>
       </tr>
       <tr>
         <td style=" color:#400000"> </td>
         <td colspan="2" bgcolor="#CCCCCC"><table width="369" border="0" style="color:#F60;margin-left:15px;">
           <tr style="background-color:#FFD7FF;  color:#000; font-weight:bold; text-align:right">
             <td width="117">Espece</td>
             <td width="38" style="text-align:center"><input type="radio" name="cb" id="checkbox"  value="esp" checked/>
               <label for="checkbox"></label></td>
             <td width="76">Chèque</td>
             <td width="34"  style="text-align:center"><input type="radio" name="cb" id="checkbox2"  value="ck"/></td>
             <td width="38">CB</td>
             <td width="40"  style="text-align:center"><input type="radio" name="cb" id="checkbox3" value="cb"/></td>
           </tr>
         </table></td>
       </tr>
       <tr>
         <td style=" color:#400000"> </td>
         <td colspan="2" bgcolor="#CCCCCC"><table width="200" border="0">
           <tr>
             <td><input type="submit" name="submit"  value="EMETTRE TICKET" style="background-color:#002800;color:#FFF" /></td>
             <td><input type="submit" name="submit2"  value="EMETTRE FACTURE" style="background-color:#002800;color:#FFF" /></td>
             <td><a href="index.php?page=annuler_vente&num="><img src="images/boutonAnnuler.png" alt="f" width="110" height="28" /></a></td>
           </tr>
         </table></td>
       </tr>
     </table></td>
     </tr>
        </table>
 

<table width="200" border="0" style="color: #400000">

  <tr>
    <td>

    </td>

  </tr>
</table>
</form>
<script type="text/javascript" src="js/placerModal.js"></script>
<script type="text/javascript" src="js/ajaxModal.js"></script>

<script type="text/javascript" src="js/placerModalPourcentage.js"></script>
<script type="text/javascript" src="js/ajaxModalPourcentage.js"></script>             
        </div>
    </div>
</div>

<script src="js/js.js" ></script>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
30 janv. 2019 à 23:40
Le premier message d'erreur indique un souci pour charger jquery...
es tu sûr que le chemin que tu as indiqué est le bon ? à savoir : 
<script src="js/template/code.jquery.jquery-1.11.1.min.js"></script>

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 ) 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

qu'est-ce que ça donne ?


Ah.. et il nous faudrait aussi le code du fichier
placerModalPourcentage.js
0
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
30 janv. 2019 à 23:58
quand je met en commentaire 
<script src="js/template/code.jquery.jquery-1.11.1.min.js"></script>
, les modals fonctionnent plus, les liens fonctionnent plus.

voici placerModalPourcentage.js 
let  qteInput = document.getElementById('inpresult') ;
let idInput = document.getElementById('cache') ;
//const links = document.getElementById('tableau').getElementsByTagName('a') ;

function placer(arg){
 qteInput.setAttribute('value',arg.textContent) ;
 idInput.setAttribute('value',arg.id) ;
}


la console affiche
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
Calculer le nombre de jour entre deux dates
Seamless -
bthivent -

5 réponses
comparer 2 fichiers texte
cs_ludwig89 -
econs -

5 réponses
comparer deux fichiers
boualiasma -
boualiasma -

108 réponses
interval entre deux date en mois seulement
infordelphi -
cantador -

10 réponses
Rejoignez-nous