Javascript function duplicating data when dynamically loaded

Asked

Viewed 88 times

2

I have a function called calculator to which the page is dynamically loaded several times (whenever the user calls the calculator page).

When you first load it is normal, but the more you load the page, the more values multiply.

Ex: first time, if you type 1 > appears 1; second time, if 1 > 11, third time 1>>>111... it’s like the function is multiplying

I already tried to delete the document statement but nothing:

delete window.main;
delete calculadora;
$("#tool-show").clear();

The function is called as follows:

 $(document).ready(function () {
       window.main =  new calculadora();
 }) // esse codigo é chamado toda vez que a  pagina carrega dinamicamente

Would there be some way to remove the decayed function from the DOM ? because I’m not able to do that Below follows the HTML page

  <div class="fix-top2">
  <div class="cctlr">
    <div id="display" class="displo">
        0
    </div>
    <input type="text" class="enters" id="vals" readonly="" style="float:left;width:100%">
    <input type="button" class="btns nbb nbl" id="vtb1" value="1">
    <input type="button" class="btns nbb" id="vtb2" value="2">
    <input type="button" class="btns nbb" id="vtb3" value="3">
    <input type="button" class="btns nbb nbr" id="soma" value="+">

    <input type="button" class="btns nbb nbl" id="vtb4" value="4">
    <input type="button" class="btns nbb" id="vtb5" value="5">
    <input type="button" class="btns nbb" id="vtb6" value="6">
    <input type="button" class="btns nbb nbr" id="sub" value="-">
    <input type="button" class="btns nbb nbl" id="vtb7" value="7">
    <input type="button" class="btns nbb" id="vtb8" value="8">
    <input type="button" class="btns nbb" id="vtb9" value="9">
    <input type="button" class="btns nbb nbr" id="div" value="/">
    <input type="button" class="btns nbb nbl" id="vtb1" value="C">
    <input type="button" class="btns nbb" id="vtb2" value="0">
    <input type="button" class="btns nbb" id="vtb3" value="=">
    <input type="button" class="btns nbb nbr" id="mult" value="*">
    </div>
    </div>

Below follows the complete calculator script In case anyone wants to take a look:

function calculadora() {
   parcial = 0;
   operaca = 'some';
   inputs = $("#vals");
   var def = function () {
       if (inputs.val() == "") {
           inputs.val(0);
       }
   }
   var display = $("#display");
   var some = function () {
       def();
       this.parcial = this.parcial + parseFloat(inputs.val());
       display.html(this.parcial)
       cleanInput();
   }
   var menos = function () {
       def();
       this.parcial = this.parcial - parseFloat(inputs.val());
       display.html(this.parcial)
       cleanInput();
   }
   var mutiplica = function () {
       def();
       this.parcial = this.parcial * parseFloat(inputs.val());
       display.html(this.parcial)
       cleanInput();
   }
   var divide = function () {
       def();
       if (inputs.val() == 0 || inputs.val() == "") {
           this.parcial = this.parcial / 1;
       } else {
           this.parcial = this.parcial / parseFloat(inputs.val());
       }
       display.html(this.parcial)
       cleanInput();

   }
   var displayIcnh = function (a) {
       inputs.val(this.inputs.val() + "" + a);
       console.log(event.type + " is fired");
   }
   var cleanInput = function () {
       inputs.val('')
   }
   var EnterExecute = function () {
       if (this.parcial != 0) {
           if (this.operaca == "some") {
               some();
           }
           if (this.operaca == "divide") {
               divide();
           }
           if (this.operaca == "menos") {
               menos();
           }
           if (this.operaca == "mutiplica") {
               mutiplica();
           }
       } else {
           some();
       }
   }
   var CleanOnes = function () {
       var here = this.inputs.val();
       if (here.length > 0) {
           this.inputs.val(here.substring(0, here.length - 1));
       } else {
           display.html("0");
           parcial = 0;
       }
   }
   $("#soma").click(function () {
       this.operaca = 'some';
       some();
   });
   $("#sub").click(function () {
       this.operaca = 'menos';
       menos();
   });
   $("#div").click(function () {
       this.operaca = 'divide';
       divide();
   });
   $("#mult").click(function () {
       this.operaca = 'mutiplica';
       mutiplica();
   });
   window.addEventListener("keydown", function (event) {
       console.log(event.keyCode);
       if (event.keyCode === 107) {
           event.preventDefault();
           EnterExecute();
           this.operaca = 'some';
       }
       if (event.keyCode === 109 || event.keyCode === 189) {
           event.preventDefault();
           EnterExecute();
           this.operaca = 'menos';
       }
       if (event.keyCode === 56 || event.keyCode === 106) {
           event.preventDefault();
           EnterExecute();
           this.operaca = 'mutiplica';
       }
       if (event.keyCode === 111 || event.keyCode === 193) {
           event.preventDefault();
           EnterExecute();
           this.operaca = 'divide';
       }
       if (event.keyCode === 49 || event.keyCode === 97) {
           displayIcnh("1");
       }
       if (event.keyCode === 50 || event.keyCode === 98) {
           displayIcnh("2");
       }
       if (event.keyCode === 51 || event.keyCode === 99) {
           displayIcnh("3");
       }
       if (event.keyCode === 52 || event.keyCode === 100) {
           displayIcnh("4");
       }
       if (event.keyCode === 53 || event.keyCode === 101) {
           displayIcnh("5");
       }
       if (event.keyCode === 54 || event.keyCode === 102) {
           displayIcnh("6");
       }
       if (event.keyCode === 55 || event.keyCode === 103) {
           displayIcnh("7");
       }
       if (event.keyCode === 56 || event.keyCode === 104) {
           displayIcnh("8");
       }
       if (event.keyCode === 57 || event.keyCode === 105) {
           displayIcnh("9");
       }
       if (event.keyCode === 48 || event.keyCode === 96) {
           displayIcnh("0");
       }
       if (event.keyCode === 13) {
           event.preventDefault();
           EnterExecute();
       }
       if (event.keyCode === 110 || event.keyCode === 46 || event.keyCode === 8) {
           event.preventDefault();
           CleanOnes();
       }
       if (event.keyCode === 194) {
           if (inputs.val() != '') {
               displayIcnh(".");
           }

       }


   }, true);
}
  • Add the html of your page to the question

  • @Leandroangelo ready, I think I can be the window.addEventListener("keydown", function (event) but I’m not going to remove it

  • It is missing a part of the code... see at the end a } alone...

  • @Bosnia and Herzegovina Truth Was Missing Calculator Function()

  • When the page is reloaded, everything is not back to normal?

  • @The page is loaded dimaicamente by a $.post(){} or it is not refresh, when I from F5 it becomes normal, but when it is dynamically loaded for the second time it starts to give this error

Show 1 more comment

1 answer

1


By creating the same object more than 1 time, it has its value doubled the number of times it was created. Checking if it already exists, it is not necessary to create it again:

if (typeof window.main === "undefined") {
    window.main = new calculadora();
}
  • thank you, it worked properly

Browser other questions tagged

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