Transformer un code en champ input [Résolu]

Question

Transformer un code en champ input [Résolu]

Signaler

msi79

Messages postés: 498
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 1 mars 2020

- 16 sept. 2018 à 00:32
msi79

Messages postés: 498
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 1 mars 2020

- 17 sept. 2018 à 13:00

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">

</div>
<div id="input">

<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>

Afficher la suite

A voir également:

Uncode forum
Dhtml code - Meilleures réponses
Uncode - Meilleures réponses
Javascript : Contrainte de saisie sur champs input - CodeS SourceS - Guide
C# / .NET : Transformation xslt - CodeS SourceS - Guide
C / C++ / C++.NET : Super effet fondu+transformation (morphing) - CodeS SourceS - Guide
ASP / ASP.NET : Exécuter un script vb.net lors d?une transformation xslt - CodeS SourceS - Guide
Python : Transformations complexes - CodeS SourceS - Guide

1 réponse

Répondre Posez votre question

jordane45 · Answer 1 · 2018-09-16T01:37:04+0200

Réponse 1 / 1

jordane45

Messages postés: 29757
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 octobre 2020

338
16 sept. 2018 à 01:37

Bonjour

Surement cette ligne la à changer

currInput.innerHTML = `${disResult}`;
}

Regarde ici
https://www.w3schools.com/jsref/dom_obj_text.asp

Afficher les 9 commentaires

Signaler

msi79

Messages postés: 498
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 1 mars 2020

16 sept. 2018 à 22:40

je veux en validant le formulaire récupérer la valeur saisie.
j'ai mis :

var x = document.createElement("INPUT");
x.setAttribute("password", "text");
x.setAttribute("password", "resultat");
x.value = `${disResult}`;

et voici le formaulaire :

    <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>

le contenu de la saisie n'est pas envoyé

Signaler

jordane45

Messages postés: 29757
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 octobre 2020

338
Modifié le 17 sept. 2018 à 07:01

Et ensuite...il faut placer ton input dans ta page...

Signaler

jordane45

Messages postés: 29757
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 octobre 2020

338
17 sept. 2018 à 09:47

var divInp = document.getElementById('input');
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("name", "password");
x.value = `${disResult}`;
divInp.appendChild(x);

Signaler

msi79

Messages postés: 498
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 1 mars 2020

17 sept. 2018 à 11:21

je comprends pas cette phrase :
Et 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>';
?>

Signaler

jordane45

Messages postés: 29757
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 17 octobre 2020

338
17 sept. 2018 à 11:46

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 :-)

Signaler

msi79

Messages postés: 498
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 1 mars 2020

17 sept. 2018 à 13:00

bien noté le NB.
merci une fois de plus .

Votre réponse