1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Transformer un code en champ input

Résolu
msi79
Messages postés
500
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
13 avril 2021
 - 16 sept. 2018 à 00:32
msi79
Messages postés
500
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
13 avril 2021
 - 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">
<!-- 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>

1 réponse

Réponse 1 / 1
jordane45
Messages postés
35428
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
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

0
msi79
Messages postés
500
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
13 avril 2021
 1
16 sept. 2018 à 12:56
Bonjour,
merci de bien vouloir m'aider.

voici ce que j'ai mis 
 currInput.createElement("INPUT") = `${disResult}`;


ça continue de fonctionner mais je me demande si c'est correcte
0
jordane45
Messages postés
35428
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356 > msi79
Messages postés
500
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
13 avril 2021
16 sept. 2018 à 14:57
Oh la la ....tu écris vraiment ton code au pifomêtre......
Essaye plutot : 
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("name", "resultat");
x.value = `${disResult}`;
0
msi79
Messages postés
500
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
13 avril 2021
 1
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é
0
msi79
Messages postés
500
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
13 avril 2021
 1
16 sept. 2018 à 22:47
je viens d'essayer ceci aussi: 
function displayResult(res) {
  if (res > 99999999999999999999 || res < -9999999999999999999) {
    disResult = "error";
    calc = [];
    input = [];
    res = [];
    intRes = false;
    displayCalculation([], false);
  } else {
    disResult = res;
    intRes = true;
  }
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("name", "password");
x.value = `${disResult}`;
  //currInput.innerHTML = `${disResult}`;
}
0
jordane45
Messages postés
35428
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2022
 356
Modifié le 17 sept. 2018 à 07:01
Et ensuite...il faut placer ton input dans ta page...
0