Platzieren Sie die Einfügemarke in einem vorherigen editierbaren div-Element und drücken Sie die EINGABETASTE erneut zu bewerten, dass die Eingabe

Ich habe dieses online-code-Ausführung editierbaren div-derzeit arbeitet Schritt für Schritt mit Hilfe einer Funktion namens parse. Eingabe von etwas (zum Beispiel 7+5) und drücken Sie die EINGABETASTE, und das Ergebnis erhalten Sie auf einer neuen Zeile unter und eine neue Eingabe-div erstellt, aber wenn Sie zurück zum vorherigen editierbaren Eingabe-div und legen Sie eine neue Eingabe, und drücken Sie die EINGABETASTE, es funktioniert nicht richtig, weil eine neue output-und input-divs sind standardmäßig erstellt und der neue code wird nicht neu bewertet.

Beachten Sie, dass wenn Sie in eine : am Ende der Eingabe in ein input-Feld (editable div), dann wird keine neue Ausgabe-div erstellt. Ausgang aus der Ansicht ausgeblendet. Dies ist durch Auslegung zur Vermeidung von langen Ausgaben, die nicht angezeigt werden müssen.

Ich habe auch versucht zu schreiben, eine neue Funktion parse2 (), aber dann der Schritt für Schritt der Auswertung nicht mehr funktioniert. Es scheint sehr schwer zu bekommen, beide (Schritt für Schritt und gehen Sie zurück zu alten editierbaren div-und re-Evaluierung) zur Arbeit an der gleichen Zeit. Wie kann das getan werden? Ich denke, ich brauche eine if-Anweisung in der Funktion parse (), die bestimmt, ob es neue Eingabe-code, der ausgeführt wird, oder eine alte code-Eingabe, die als re-evaluiert. Ich habe auch versucht, vergeben Sie eine Nummer für die Eingabe divs, aber ich habe nicht geschafft zu arbeiten.

 function parse2(e) {
 if (e.keyCode == 13) {
 event.preventDefault();

 if (document.getElementById("output") == null) {
  CreateOutputDiv();
  CreateInputDiv(); 
  // calculates and assign values to output div 
  var d1 = document.getElementById(JSON.stringify(input)).innerText; 
  console.log("in = " + d1); 
  var d2 = eval(d1);
  console.log("out = " + d2);
  output.innerHTML = d2;
  document.getElementById("count").value += '\n' + '\n' + cc;     
  } else if { //re-evaluates inputbox = works
  var d1 = document.getElementById(JSON.stringify(input)).innerText;  
  console.log("new in = " + d1); 
  var d2 = eval(d1);
  console.log("new out = " + d2);
  output.innerHTML = d2; 
  input.focus();
   }  else { //re-evaluates inputbox = works
  CreateOutputDiv();
  var d1 = document.getElementById(JSON.stringify(input)).innerText;  
  console.log("new in = " + d1); 
  var d2 = eval(d1);
  console.log("new out = " + d2);
  output.innerHTML = d2; 
  input.focus(); }}}

JavaS.js und HTML unter

// counts the number of input divs created
function increment() {
  increment.n = increment.n || 0;
  return ++increment.n;
}

// creates an input div
function CreateInputDiv() {
  increment();
  cc = increment.n;
  console.log("increment.n = " + cc);

  input = document.createElement("div");
  input.setAttribute("id", "input");
  input.setAttribute("class", "input");
  input.innerHTML = "&nbsp";
  input.setAttribute("contenteditable", "true");
  input.setAttribute("onkeypress", "parse(event, this)");
  document.getElementById('calc').appendChild(input);
  input.focus();
}

// creates an output div 
function CreateOutputDiv() {
  output = document.createElement("div");
  output.setAttribute("id", "output");
  output.setAttribute("class", "output");
  output.setAttribute("tabindex", "0");
  output.setAttribute("contenteditable", "true");
  document.getElementById('calc').appendChild(output);
}


function parse(e) {
  var key = window.event.keyCode;

  if (key == 13) { //keycode for enter 
    event.preventDefault();

    var inz = input.innerText;

    // check if input contains a colon. Hides output if colon exist. 
    if (inz.indexOf(':') > -1) {
     // colon 
      var inz = input.innerText.replace(/:/g, '');
      console.log("input without colon = " + inz);
      var outz = eval(inz);
      console.log("out = " + outz);
      document.getElementById("count").value += '\n' + eval(cc + 1);
      CreateInputDiv();
    }
    else {
      // no colon = display output
      // counter 
      document.getElementById("count").value += '\n' + '\n' + eval(cc + 1);

      // create output div 
      CreateOutputDiv(); 

      // calculate and assign output value to output div  
      console.log("input = " + inz);
      var outz = eval(inz);
      console.log("out = " + outz);
      output.innerHTML = outz;

      // creates a new input div
      CreateInputDiv();
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="JavaS.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <meta charset="utf-8" />
  <style>
      div:focus {
      background-color: lightpink;
    }
  .input {
      background-color: lightgreen;
      width: 980px;
      border: none;
      font-size: 16px;
      resize: none;
      overflow: auto;
      overflow-wrap: break-word; 
    }
    .output {
      background-color: lightblue;
      width: 980px;
      border: none;
      font-size: 16px;
      resize: none;
      overflow-wrap: break-word; 
    }
   #count {
      background-color: lightblue;
      color: black;
      width: 25px;
      height: 650px;
      font-size: 17px;
      resize: none;
      overflow: auto;
      border: none;              
    }
#calc{
background-color:lightblue;
overflow: scroll;
vertical-align: top; 
border: none;
}
</style>
</head>
<body bgcolor="grey">
<table align="center" width="1000px" height="650px" bgcolor="lightblue">
    <tr>
        <td><textarea id="count" disabled>1 </textarea> </td>
        <td id = "calc"></td>
    </tr>
</table>
 
  <script>   CreateInputDiv();   </script>

</body>

</html>

0
2019-09-19 10:48:15
Quelle

Sehen Sie sich andere Fragen zu Tags an