将插入符号放在以前的可编辑 div 中并按 Enter 应重新评估该输入

Question

我有这个在线代码执行可编辑 div，它目前通过使用名为 parse 的函数逐步工作。您输入一些东西（例如 7+5）并按回车键，您会在下面的新行上得到结果并创建一个新的输入 div，但是如果您返回到之前的可编辑输入 div 并输入一个新的输入并按回车键它无法正常工作，因为默认情况下会创建新的输出和输入 div，并且不会重新评估新代码。请注意，如果您在输入框（可编辑的 div）中的输入末尾放入 : 则不会创建新的输出 div。输出在视图中隐藏。这是为了避免不需要显示的长输出而设计的。我还尝试编写一个新函数 parse2() 但随后逐步评估停止工作。让两者（逐步返回到旧的可编辑 div 并重新评估）同时工作似乎非常困难。如何才能做到这一点？我想我需要在函数 parse() 中使用一些 if 语句来确定它是正在执行的新输入代码还是正在重新评估的旧输入代码。我也尝试为输入 div 分配一个数字，但我没有设法让它工作。 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(); }}}

Answer 1

当您创建新的输入和输出 div 时，您将对所有输入和输出应用相同的 id。取而代之的是，您可以使用计数器编号“cc”来提供所有唯一 ID。然后，当您调用 parse 函数时，您已经在为其提供参数“this”。使用 'this' 通过 id 获取元素。如果具有此输出 id 的 div 已经存在，只需更改其内容，否则创建一个新的。

    <script>

    // 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"+cc);

      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"+cc);

      output.setAttribute("class", "output");

      output.setAttribute("tabindex", "0");

      output.setAttribute("contenteditable", "true");

      document.getElementById('calc').appendChild(output);

    }

    function parse(e,e2) {

        //console.log(e2);

      var key = window.event.keyCode;

      if (key == 13) { //keycode for enter 

        event.preventDefault();    

        //console.log(e2.id);

        var inId = e2.id;

        var outId = "output"+ inId.substring(5);

        //console.log(outId);

        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 

          if(document.getElementById(outId)) {

              console.log("Already created");

              inz = document.getElementById(inId).innerText;

              console.log(inz);

              var outz = eval(inz);

              document.getElementById(outId).innerHTML = outz;

          } 

          else {

                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();          

          }

        }

      }

    }

   </script>