如何修复此计算器 UI？ (Javascript from code.org) 我会在下面解释

Question

好的，这是我完成的第一个程序，这是我在高中 cs class 中尝试做的一个副项目。所以我真的不知道如何很好地解释这个问题，所以这里是代码和程序的 link。 https://studio.code.org/projects/applab/NXVTYdQ5srab3hWcx_ihgrR6qIDuYTnXYE3NfBxxMPQ

我现在遇到的问题是，一旦你按下其中一个按钮，比如基础数学，然后按下返回，然后再次按下，它就会在它下面创建一个副本。我该如何解决这个问题？

如果您不想去 link，请使用以下代码：（请留下任何建议）

  button("basicMath","BasicMath");
  button("Der/Int","d/dx/ ∫");
  button("QF","Quadratic Formula");

var total = 0;

write("IF USING 'd/dx' or '∫', first input = base number, second = exponent");
write("IF USING EXPONENTS then first input = base number, second = exponent");

  onEvent("basicMath", "click", function() {  // OPTIONS FOR MATH 
   setScreen("BasicMath");

  textInput("num1","0"); // TEXT INPUT
  textInput("num2","0"); // TEXT INPUT
  //textInput("num3","0"); // TEXT INPUT

  button("reset", "Go Back");

  textLabel("result",''); // Result
  textLabel("writing", '');
  textLabel("ansresult", "The Answer is: ");

  setPosition("ansresult", 0, 350, 150, 70);
  setPosition("result", 130, 350, 170, 70 );
  setPosition("writing", 130, 400, 170, 70 ); 

  button("clear","clear"); // clear  Button
  button("answer", "ans");
  button("plus","+"); // +  Button
  button("subract","-"); // -  Button
  button("multiply","*"); // *  Button
  button("divide", "/"); // /  Button
  button("exponent", "^"); // Exponent Button 

   onEvent("reset","click", function() {
    setScreen("OptionsScreen");
  });
 onEvent("clear","click", function() {
   total =  0;
  setText("result", total);
    setKeyValue("answer", total, function () {
  });
});

onEvent("answer","click", function() { // Recent Answer get back

  getKeyValue("answer", function (value) {
    setText("result", value);
    });
});

  var addition = onEvent("plus","click", function() {
  if (addition === true) {
    var num1 = getNumber("num1");
    var num2 = getNumber("num2");
    //var num3 = getNumber("num3");
      total =  num1 + num2; // + num3
  setText("result", total);
  } else {
      setText("writing","Error");
  }
  setKeyValue("answer", total, function () {
  });
});

 var subract = onEvent("subract","click", function() { // Subraction
  if (subract === true) {
  var num1 = getNumber("num1");
  var num2 = getNumber("num2");
  //var num3 = getNumber("num3");
      total =  num1 - num2; // num 3
  setText("result", total);
  } else {
      setText("writing", "Error");
  }
  setKeyValue("answer", total, function () {
  });
});

var multiply = onEvent("multiply","click", function() { // Multiply
  if (multiply === true) {
   var num1 = getNumber("num1");
    var num2 = getNumber("num2");
      total =  num1 *= num2;
  setText("result", total);
  } else {
      setText("writing", "Error");
  }
  setKeyValue("answer", total, function () {
  });
});

var divide = onEvent("divide","click", function() { // Division
  if (divide === true) {
   var num1 = getNumber("num1");
    var num2 = getNumber("num2");
      total =  num1 /= num2;
  setText("result", total);
  } else {
      setText("writing", "Error");
  }
  setKeyValue("answer", total, function () {
  }); 
});

var exponent = onEvent("exponent","click", function() { // Exponents
  if (exponent === true) {
   var num1 = getNumber("num1");
    var num2 = getNumber("num2");
      total =  Math.pow(num1,num2);
  setText("result", total);
  } else {
      setText("writing","Error");
  }
  setKeyValue("answer", total, function () {
    });
  });
});

  onEvent("Der/Int", "click", function() { // d/dx / INTEGRALS
    setScreen("Deriv/Inte");

  textInput("num3","0"); // TEXT INPUT
  textInput("num4","0"); // TEXT INPUT
  button("reset1", "Go Back");

  textLabel("result1",''); // Result
  textLabel("writing1", '');
  textLabel("ansresult1", "The Answer is: ");

  setPosition("ansresult1", 0, 350, 150, 70);
  setPosition("result1", 130, 350, 170, 70 );
  setPosition("writing1", 130, 400, 170, 70 ); 

  button("clear1","clear"); // clear  Button
  button("integral", "integral"); // Integral Button
  button("derivative", "d/dx"); // Derivative Button

    onEvent("clear1","click", function() { // CLEAR BUTTON
  total =  0;
  setText("result1", total);
  setText("writing1", '');
});

  onEvent("reset1","click", function() { // GO BACK BUTTON
    setScreen("OptionsScreen");
  });

  onEvent("integral","click", function() { // Simple Integration
    var num3 = getNumber("num3");
    var num4 = getNumber("num4");
    var exponentAdd = num4 += 1;  // Reverse power rule
    var exponentDivide = num3 /= exponentAdd ; // Reverse power rule
    var result = exponentDivide; 
    setText("result1", result + 'x' + exponentAdd); // (result + 'x' + exponentAdd);
    setText("writing1","The last number is the exponent");
});

onEvent("derivative","click", function() { // SIMPLE DERIVATIVES
    var num3 = getNumber("num3");
    var num4 = getNumber("num4");
    var exponentMultiply = num4 * num3; // POWER RULE
    var exponentSubract = num4 - 1; // POWER RULE
    var result = exponentMultiply;

if (num4 === 0) {
    setText("result", "0"); // FIND THE CONSTANT IF THE EXPONENT WILL BECOME 0 OR 1
  } else if (num4 === 1) {
    setText("result1", num3);
} else {
    setText("result1", result + 'x' + exponentSubract);
    setText("writing1","The last number is the exponent");
    } 
  });
});

  onEvent("QF","click", function() { // QUADRATIC FUNCTION
  setScreen("QuadF");

  textInput("a","0"); // TEXT INPUT
  textInput("b","0"); // TEXT INPUT
  textInput("c","0"); // TEXT INPUT

  button("reset2", "Go Back");
  button("clear2","clear"); // clear  Button

  textLabel("result2",''); // Result
  textLabel("writing2", '');
  textLabel("ansresult2", "The Answer is: ");

  setPosition("ansresult2", 0, 350, 150, 70);
  setPosition("result2", 130, 350, 170, 70 );
  setPosition("writing2", 130, 400, 170, 70 ); 

  button("quadraticFormula", "Quadratic Formula");

  onEvent("clear2","click", function() {

   total =  0;
  setText("result2", total);
  setText("writing2", '');
    setKeyValue("answer", total, function () {
  });
});
 onEvent("reset2","click", function() {
    setScreen("OptionsScreen");
    });

  onEvent("quadraticFormula","click", function() { 

    var a = getNumber("a");
    var b = getNumber("b");
    var c = getNumber("c");

    var discriminate1 =  Math.sqrt(Math.pow(b,2)-4*a*c); // SQRT(B^2 - 4(a)(c)

    var discriminate2 = -b + discriminate1;
    var discriminate3 = -b - discriminate1;
    var sol1 = discriminate2/2*a;
    var sol2 = discriminate3/2*a;
      setText("result2","x = " + sol1 + " x = " +sol2);
      setText("writing2", "IF X IS 'NaN' THEN NO REAL SOLUTION!");
  });
});

Answer 1

您的屏幕（输入字段和按钮）被一次又一次地放置。所以，你得先看看有没有办法清除它。

每当有人从菜单中选择一个选项时，清除屏幕然后重新构建屏幕。

他们可能有这样的方法：

clearScreen("screen name");

编辑：由于没有 clearScreen 选项，看起来你必须在开始时一个一个地创建所有 4 个屏幕。 OnEvent 你应该只改变屏幕。因此，屏幕只会创建一次并保持隐藏状态。

如何修复此计算器 UI？ (Javascript from code.org) 我会在下面解释

How do I fix this calculator UI? (Javascript from code.org) I will explain down below

javascript

calculator

calc

code.org