Bonjour,
j'aimerai utiliser ce code . pour ce faire je veux que la partie ou s'affiche le résultat soit un champ de type input.
ici le résultat est 555555...
j'ai l'impression que c'est dans cette partie.
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
</div>
</div>
donc je veux avoir quelque chose du genre:
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
<input type="text" name="resultat" class="form-control" value="5555555" >
</div>
</div>
</code>
voici le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Calculator - Bootsnipp.com</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">
<style type="text/css">
*,:focus{outline:0}
.clear,.output>*{text-transform:uppercase}
:root{font-size:25px}
*{margin:0;padding:0}
body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)}
button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease}
button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s}
button:active{top:4px;transition:.3s;background:#EEA9A8!important}
.container{height:100vH;display:flex;justify-content:center;align-items:center}
.calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey}
.output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4}
.output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000}
#calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)}
#input{height:1.5rem;font-size:1.5rem}
.number{background-color:rgba(255,255,255,.65)}
.number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)}
.number:active{background-color:rgba(255,255,255,.9)}
.clear{font-size:1rem;background-color:rgba(240,120,120,.5)}
.clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)}
.clear:active{background-color:rgba(240,120,120,.8)}
.equal{background:rgba(70,240,90,.4)}
.equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)}
.equal:active{background-color:rgba(80,240,100,.7)}
.dot,.neg,.operator{background-color:rgba(0,0,0,.15)}
.dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)}
.dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)}
#c{background:rgba(240,10,10,.5)}
#c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)}
#c:active{background:rgba(240,10,10,.6)}
.button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)}
</style>
<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>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="output">
<div id="calculation">
<!-- Display for calculation -->
</div>
<div id="input">
<!-- Display for Input & Result -->
</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="del" class="clear" name="delete"><span>del</span></button>
<button type="button" id="/" class="operator" name="devide">÷</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="*" class="operator" name="multiply">×</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="-" class="operator" name="substract">−</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>
<button type="button" id="+" class="operator" name="add">+</button>
<button type="button" id="negative" class="neg" name="+/-">±</button>
<button type="button" id="0" class="number" name="0">0</button>
<button type="button" id="." class="dot" name="dot">.</button>
<button type="button" id="=" class="equal" name="equal">=</button>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
const buttons = document.querySelectorAll("button");
const currCalc = document.querySelector("#calculation");
const currInput = document.querySelector("#input");
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.innerHTML = `${input.join("")}`;
}
}
function onClear(el) {
if (el === "c") {
// clear all
calc = [];
input = [];
intRes = false;
res = undefined;
displayCalculation(calc, false);
currInput.innerHTML = "";
// console.log(calc, input, negative, intRes, res);
} else if (el === "ce") {
// clear entry (input)
input = [];
currInput.innerHTML = "";
} else if (el === "del" && input.length > 0) {
// delete last input character
input.splice(-1);
currInput.innerHTML = `${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.innerHTML = `${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.innerHTML = `${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.innerHTML = `${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.innerHTML = `${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>
</body>
je comprends pas cette phrase :
Et ensuite...il faut placer ton input dans ta page...
C'est bien pour ça que je t'ai donné le code juste en dessous de ce message......
toujours pas de recuperation de la saisie lorsqu'on post
Là.. c'est autre chose. Rien à voir avec ta question initiale qui était :
la partie ou s'affiche le résultat soit un champ de type input
Donc.. déjà... est ce que le champ de type INPUT se créé bien sur ta page suite à la modification que nous avons fait ?
Si tu regardes le code source généré par ton navigateur sur cet élément.. quel est-il ?
EDIT : Après avoir testé ton code directement... je pense avoir compris ce que tu souhaitais réellement faire...
Donc ceci devrait te convenir :
<?php
$inpresult = !empty($_POST['inpresult']) ? $_POST['inpresult'] : NULL;
if($inpresult){
echo "<script type='text/javascript'>
alert('".$inpresult."');
</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Calculator - Bootsnipp.com</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">
<style type="text/css">
*,:focus{outline:0}
.clear,.output>*{text-transform:uppercase}
:root{font-size:25px}
*{margin:0;padding:0}
body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)}
button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease}
button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s}
button:active{top:4px;transition:.3s;background:#EEA9A8!important}
.container{height:100vH;display:flex;justify-content:center;align-items:center}
.calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey}
.output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4}
.output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000}
#calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)}
#input{height:1.5rem;font-size:1.5rem}
.number{background-color:rgba(255,255,255,.65)}
.number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)}
.number:active{background-color:rgba(255,255,255,.9)}
.clear{font-size:1rem;background-color:rgba(240,120,120,.5)}
.clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)}
.clear:active{background-color:rgba(240,120,120,.8)}
.equal{background:rgba(70,240,90,.4)}
.equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)}
.equal:active{background-color:rgba(80,240,100,.7)}
.dot,.neg,.operator{background-color:rgba(0,0,0,.15)}
.dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)}
.dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)}
#c{background:rgba(240,10,10,.5)}
#c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)}
#c:active{background:rgba(240,10,10,.6)}
.button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)}
</style>
<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>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="form1" name="form1" method="post" action="">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<label for="firstName">Login</label>
<input type="text" name="pseudo" class="form-control" id="pseudo" value="<?php echo $_GET['id_user'] ; ?>" required>
<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="inpresult" id="inpresult" value="" style="color:#001122">
</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="del" class="clear" name="delete"><span>del</span></button>
<button type="button" id="/" class="operator" name="devide">÷</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="*" class="operator" name="multiply">×</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="-" class="operator" name="substract">−</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>
<button type="button" id="+" class="operator" name="add">+</button>
<button type="button" id="negative" class="neg" name="+/-">±</button>
<button type="button" id="0" class="number" name="0">0</button>
<button type="button" id="." class="dot" name="dot">.</button>
<button type="button" id="=" class="equal" name="equal">=</button>
</div>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Enregistrer" />
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
</body>
</html>
<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>
</body>
NB: Encore une fois... tes explications n'étaient clairement pas assez précises ni comprensibles.... Il faut vraiment se triturer les méninges pour essayer de te comprendre... Il serait bien que tu commences à faire des efforts.
Ca fait déjà pas mal de temps que tu postes des questions sur ce forum.. et à chaque fois c'est la même galère pour te comprendre :-)
- Messages postés
-
32136
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 21 avril 2021
345- Messages postés
-
32136
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 21 avril 2021
345var divInp = document.getElementById('input'); var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("name", "password"); x.value = `${disResult}`; divInp.appendChild(x);- Messages postés
-
500
- Date d'inscription
- lundi 24 août 2009
- Statut
- Membre
- Dernière intervention
- 13 avril 2021
1Et ensuite...il faut placer ton input dans ta page...
toujours pas de recuperation de la saisie lorsqu'on post
voici tout le code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>Calculator - Bootsnipp.com</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"> <style type="text/css"> *,:focus{outline:0} .clear,.output>*{text-transform:uppercase} :root{font-size:25px} *{margin:0;padding:0} body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)} button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease} button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s} button:active{top:4px;transition:.3s;background:#EEA9A8!important} .container{height:100vH;display:flex;justify-content:center;align-items:center} .calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey} .output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4} .output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000} #calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)} #input{height:1.5rem;font-size:1.5rem} .number{background-color:rgba(255,255,255,.65)} .number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)} .number:active{background-color:rgba(255,255,255,.9)} .clear{font-size:1rem;background-color:rgba(240,120,120,.5)} .clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)} .clear:active{background-color:rgba(240,120,120,.8)} .equal{background:rgba(70,240,90,.4)} .equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)} .equal:active{background-color:rgba(80,240,100,.7)} .dot,.neg,.operator{background-color:rgba(0,0,0,.15)} .dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)} .dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)} #c{background:rgba(240,10,10,.5)} #c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)} #c:active{background:rgba(240,10,10,.6)} .button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)} </style> <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> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form id="form1" name="form1" method="post" action=""> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <label for="firstName">Login</label> <input type="text" name="pseudo" class="form-control" id="pseudo" value="<?php echo $_GET['id_user'] ; ?>" required> <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 --> </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="del" class="clear" name="delete"><span>del</span></button> <button type="button" id="/" class="operator" name="devide">÷</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="*" class="operator" name="multiply">×</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="-" class="operator" name="substract">−</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> <button type="button" id="+" class="operator" name="add">+</button> <button type="button" id="negative" class="neg" name="+/-">±</button> <button type="button" id="0" class="number" name="0">0</button> <button type="button" id="." class="dot" name="dot">.</button> <button type="button" id="=" class="equal" name="equal">=</button> </div> </div> <hr class="mb-4"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Enregistrer" /> </div> <div class="col-md-3"></div> </div> </form> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ const buttons = document.querySelectorAll("button"); const currCalc = document.querySelector("#calculation"); const currInput = document.querySelector("#input"); 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.innerHTML = `${input.join("")}`; } } function onClear(el) { if (el === "c") { // clear all calc = []; input = []; intRes = false; res = undefined; displayCalculation(calc, false); currInput.innerHTML = ""; // console.log(calc, input, negative, intRes, res); } else if (el === "ce") { // clear entry (input) input = []; currInput.innerHTML = ""; } else if (el === "del" && input.length > 0) { // delete last input character input.splice(-1); currInput.innerHTML = `${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.innerHTML = `${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.innerHTML = `${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.innerHTML = `${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; } var divInp = document.getElementById('input'); var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("name", "password"); x.value = `${disResult}`; divInp.appendChild(x); //currInput.innerHTML = `${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> </body>voici le code php :
<?php if(isset($_POST['submit'])){ $msg = 'PSEUDO '.$_POST['pseudo'].' PASSWORD '.$_POST['password']; echo '<script>alert(\' '.$msg.' \');</script>'; ?>- Messages postés
-
32136
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 21 avril 2021
345C'est bien pour ça que je t'ai donné le code juste en dessous de ce message......
Là.. c'est autre chose. Rien à voir avec ta question initiale qui était :
Donc.. déjà... est ce que le champ de type INPUT se créé bien sur ta page suite à la modification que nous avons fait ?
Si tu regardes le code source généré par ton navigateur sur cet élément.. quel est-il ?
EDIT : Après avoir testé ton code directement... je pense avoir compris ce que tu souhaitais réellement faire...
Donc ceci devrait te convenir :
<?php $inpresult = !empty($_POST['inpresult']) ? $_POST['inpresult'] : NULL; if($inpresult){ echo "<script type='text/javascript'> alert('".$inpresult."'); </script>"; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>Calculator - Bootsnipp.com</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"> <style type="text/css"> *,:focus{outline:0} .clear,.output>*{text-transform:uppercase} :root{font-size:25px} *{margin:0;padding:0} body{font-family:Inconsolata,monospace;background:#ABCEA7;background:-webkit-linear-gradient(to top,#ABCEA7,#C48B91);background:linear-gradient(to top,#ABCEA7,#C48B91)} button{padding:.25rem;font-size:1.25rem;font-family:inherit;border:1px solid rgba(255,255,255,.2);border-radius:5px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-shadow:0 4px #C09C98!important;transition:all .3s ease} button:hover{border:none;background:#EEA9A8;cursor:pointer;box-shadow:0 4px #EF7475!important;transition:.3s} button:active{top:4px;transition:.3s;background:#EEA9A8!important} .container{height:100vH;display:flex;justify-content:center;align-items:center} .calculator{min-width:16rem;padding:.75rem;background:rgba(255,255,255,.6);border-radius:5px;box-shadow:1px 1.5px 3px 2px grey} .output{margin-bottom:1.75rem;padding:.8rem .5rem;background:rgba(0,0,0,.2);border-radius:3px;box-shadow:inset 0 4px rgba(0,0,0,.2);grid-column:1/span 4} .output>*{color:#fff;text-align:right;text-shadow:1px 1px 1px #000} #calculation{height:1rem;margin-bottom:.5rem;font-size:1rem;color:rgba(255,255,255,.8)} #input{height:1.5rem;font-size:1.5rem} .number{background-color:rgba(255,255,255,.65)} .number:hover{box-shadow:0 0 3px 1px rgba(255,255,255,.75)} .number:active{background-color:rgba(255,255,255,.9)} .clear{font-size:1rem;background-color:rgba(240,120,120,.5)} .clear:hover{box-shadow:0 0 3px 1px rgba(240,120,120,.6)} .clear:active{background-color:rgba(240,120,120,.8)} .equal{background:rgba(70,240,90,.4)} .equal:hover{box-shadow:0 0 3px 1px rgba(70,240,90,.5)} .equal:active{background-color:rgba(80,240,100,.7)} .dot,.neg,.operator{background-color:rgba(0,0,0,.15)} .dot:hover,.neg:hover,.operator:hover{box-shadow:0 0 3px 1px rgba(0,0,0,.2)} .dot:active,.neg:active,.operator:active{background-color:rgba(0,0,0,.25)} #c{background:rgba(240,10,10,.5)} #c:hover{box-shadow:0 0 3px 1px rgba(240,10,10,.55)} #c:active{background:rgba(240,10,10,.6)} .button-field{display:grid;grid-gap:.25rem;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr)} </style> <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> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form id="form1" name="form1" method="post" action=""> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <label for="firstName">Login</label> <input type="text" name="pseudo" class="form-control" id="pseudo" value="<?php echo $_GET['id_user'] ; ?>" required> <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="inpresult" id="inpresult" value="" style="color:#001122"> </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="del" class="clear" name="delete"><span>del</span></button> <button type="button" id="/" class="operator" name="devide">÷</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="*" class="operator" name="multiply">×</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="-" class="operator" name="substract">−</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> <button type="button" id="+" class="operator" name="add">+</button> <button type="button" id="negative" class="neg" name="+/-">±</button> <button type="button" id="0" class="number" name="0">0</button> <button type="button" id="." class="dot" name="dot">.</button> <button type="button" id="=" class="equal" name="equal">=</button> </div> </div> <hr class="mb-4"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <input type="submit" class="btn btn-primary btn-lg btn-block" name="submit" value="Enregistrer" /> </div> <div class="col-md-3"></div> </div> </form> </div> </body> </html> <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> </body>NB: Encore une fois... tes explications n'étaient clairement pas assez précises ni comprensibles.... Il faut vraiment se triturer les méninges pour essayer de te comprendre... Il serait bien que tu commences à faire des efforts.
Ca fait déjà pas mal de temps que tu postes des questions sur ce forum.. et à chaque fois c'est la même galère pour te comprendre :-)
- Messages postés
-
500
- Date d'inscription
- lundi 24 août 2009
- Statut
- Membre
- Dernière intervention
- 13 avril 2021
1merci une fois de plus .