How do I 'clean the results' when the user clicks ADD (activating the function Calc onclick)?

Asked

Viewed 63 times

0

Follows the code

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        background-color: brown;
      }

      .menu button {
        font: normal 18pt Arial;
        background-color: coral;
        border-radius: 4px 4px 4px;
        box-shadow: 5px 5px 15px;
      }

      .menu button:hover {
        background-color: rgb(252, 110, 58);
      }
    </style>
  </head>

  <body>
    <nav class="menu">
      <button id="som" onclick="calc()">SOMAR</button>
      <button id="sub">SUBITRAIR</button>
      <button id="divi">DIVIDIR</button>
      <button id="mut">MULTIPLICAR</button>
      <div id="div"></div>
    </nav>

    <script>
      function calc() {
        // AQUI FICAM AS VARIAVEIS
        var div = document.createElement("div");
        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        var div3 = document.createElement("div");
        var div4 = document.createElement("div");
        var center = document.createElement("div");
        var inp1 = document.createElement("input", "number");
        var inp2 = document.createElement("input", "number");
        var text1 = document.createTextNode("Digite o primeiro numero: ");
        var text2 = document.createTextNode("Digite o segundo numero: ");
        var somarb = document.createElement("button");
        var container = document.querySelector("#div");

        // AQUI FICAM OS ESTILOS

        div.style.width = "90%";
        div.style.height = "520px";
        div.style.backgroundColor = "white";
        div.style.margin = "-7% 5%";
        div.style.borderRadius = "10px 10px 10px";
        div.style.boxShadow = "5px 5px 10px 4px";
        div.style.font = "normal 18pt Arial";

        div4.style.font = "normal 42pt Arial";
        div4.style.color = "#900";
        div4.style.textAlign = "center";

        somarb.innerHTML = "Calcular";
        somarb.style.backgroundColor = "#900";
        somarb.style.borderRadius = "10px 10px 10px";
        somarb.style.boxShadow = "5px 5px 10px 4px";

        center.style.margin = "10% 1%";
        center.style.font = "normal 30pt Arial";

        inp1.style.width = "400px";
        inp1.style.height = "20px";

        inp2.style.width = "400px";
        inp2.style.height = "20px";

        // AQUI FICAM OS CHILDS
        div.appendChild(center);
        center.appendChild(div2);
        center.appendChild(div1);
        center.appendChild(div3);
        center.appendChild(div4);
        div1.appendChild(text1);
        div1.appendChild(inp1);
        div2.appendChild(text2);
        div2.appendChild(inp2);
        div3.appendChild(somarb);
        container.appendChild(div);

        // AQUI FICAM AS FUNÇÕES

        somarb.onclick = function () {
          var n1 = Number(inp1.value);
          var n2 = Number(inp2.value);
          var soma = n1 + n2;

          var res = document.createTextNode(
            `A soma entre ${n1} e ${n2} é igual a ${soma}`
          );
          div4.style.margin = "10% 10%";

          div4.appendChild(res);
        };
      }
    </script>
  </body>
</html>

I know that the code should not be very good, and this is the first "project" that I am trying to do alone, practicing a little know..

When I activate the Calc function, it creates everything again below the main div. I wanted it to clear the result or something like.

PRINT DO QUE ESTÁ OCORRENDO

I know a lot could be done with html or CSS, but I wanted to practice JS anyway.

javascript javascript-events

1 answer

0


Hello,

It turns out that the method appendChild always add a new child to the element. You can create a global variable called oldChild, and when calculating the sum, you check whether oldChild there is, and then he uses the method replaceChild(newChild, oldChild), if not, he uses the appendChild(newChild) normal.

Follow an example:

var oldChild;

// Segue o código normalmente

// No método do onclick:
if (oldChild) div4.replaceChild(res, oldChild);
else div4.appendChild(res);

oldChild = res;

Leaving entirely so:

somarb.onclick = function () {
  var n1 = Number(inp1.value);
  var n2 = Number(inp2.value);
  var soma = n1 + n2;

  var res = document.createTextNode(
    `A soma entre ${n1} e ${n2} é igual a ${soma}`
  );

  div4.style.margin = "10% 10%";

  if (oldChild) div4.replaceChild(res, oldChild);
  else div4.appendChild(res);

  oldChild = res;
};

Complete code:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        background-color: brown;
      }

      .menu button {
        font: normal 18pt Arial;
        background-color: coral;
        border-radius: 4px 4px 4px;
        box-shadow: 5px 5px 15px;
      }

      .menu button:hover {
        background-color: rgb(252, 110, 58);
      }
    </style>
  </head>

  <body>
    <nav class="menu">
      <button id="som" onclick="calc()">SOMAR</button>
      <button id="sub">SUBITRAIR</button>
      <button id="divi">DIVIDIR</button>
      <button id="mut">MULTIPLICAR</button>
      <div id="div"></div>
    </nav>

    <script>
      function calc() {
        // AQUI FICAM AS VARIAVEIS
        var div = document.createElement("div");
        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        var div3 = document.createElement("div");
        var div4 = document.createElement("div");
        var center = document.createElement("div");
        var inp1 = document.createElement("input", "number");
        var inp2 = document.createElement("input", "number");
        var text1 = document.createTextNode("Digite o primeiro numero: ");
        var text2 = document.createTextNode("Digite o segundo numero: ");
        var somarb = document.createElement("button");
        var container = document.querySelector("#div");
        var oldChild;

        // AQUI FICAM OS ESTILOS

        div.style.width = "90%";
        div.style.height = "520px";
        div.style.backgroundColor = "white";
        div.style.margin = "-7% 5%";
        div.style.borderRadius = "10px 10px 10px";
        div.style.boxShadow = "5px 5px 10px 4px";
        div.style.font = "normal 18pt Arial";

        div4.style.font = "normal 42pt Arial";
        div4.style.color = "#900";
        div4.style.textAlign = "center";

        somarb.innerHTML = "Calcular";
        somarb.style.backgroundColor = "#900";
        somarb.style.borderRadius = "10px 10px 10px";
        somarb.style.boxShadow = "5px 5px 10px 4px";

        center.style.margin = "10% 1%";
        center.style.font = "normal 30pt Arial";

        inp1.style.width = "400px";
        inp1.style.height = "20px";

        inp2.style.width = "400px";
        inp2.style.height = "20px";

        // AQUI FICAM OS CHILDS
        div.appendChild(center);
        center.appendChild(div2);
        center.appendChild(div1);
        center.appendChild(div3);
        center.appendChild(div4);
        div1.appendChild(text1);
        div1.appendChild(inp1);
        div2.appendChild(text2);
        div2.appendChild(inp2);
        div3.appendChild(somarb);
        container.appendChild(div);

        // AQUI FICAM AS FUNÇÕES

        somarb.onclick = function () {
          var n1 = Number(inp1.value);
          var n2 = Number(inp2.value);
          var soma = n1 + n2;

          var res = document.createTextNode(
            `A soma entre ${n1} e ${n2} é igual a ${soma}`
          );

          div4.style.margin = "10% 10%";

          if (oldChild) div4.replaceChild(res, oldChild);
          else div4.appendChild(res);

          oldChild = res;
        };
      }
    </script>
  </body>
</html>

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.