JavaScript, save the initial values of the variables

Question

JavaScript, save the initial values of the variables

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Well, I'm doing a little code in JS , in it I need to save the initial values of my html . I have a paragraph field ( <p> ) that starts in a way, I wanted to save the initial state of this paragraph so I always compare the current state with the initial state, but for some reason this is not working.

The HTML code line:

<p class="cont" id="res">A soma dos primeiros <input id="cont" type="number" name="num" min="0" max="100000000"> multiplos de <input id="mul1" type="number" name="num" min="1" max="1000"> e <input id="mul2" type="number" name="num" min="1" max="1000"> é: </p>

JS Code:

window.onload = function() {
    //quando a janela carrega eu salvo o estado inicial do <p>
    var pad = document.getElementById("res");
    //funcao q faz o calculo
    document.getElementById("calcmult").onclick = function () {

        var contador = document.getElementById("cont").value;
        var num1 = document.getElementById("mul1").value;
        var num2 = document.getElementById("mul2").value;
        var i=0;
        var x=0;
        var y=0;
        while(i<=contador){
            if(x%num1 == 0 && x%num2 == 0){
                y = y + x;
                i++;
            }
            x++;
        }
        //defino que x é igual ao paragrafo
        x = document.getElementById("res");
        //o html de x é igual ao valor inicial do paragrafo + y que é o valor
        x.innerHTML = pad.innerHTML + y;
        //zero os valores que estavam nos campos
        document.getElementById("cont").value = '';
        document.getElementById("mul1").value = '';
        document.getElementById("mul2").value = '';
    }
}

For some reason it saves the initial state all the time, causing the initial state to change and not doing the effect I want. Now when I compute it, in the second run, it concatenates the response values rather than simply compare with the initial state, which still has no answer, and give only one value.

My final goal is, for example, I have the following paragraph:

Type the first number to add the value

javascript html html5

asked by anonymous 28.09.2015 / 21:56

3 answers

0

Would that be it? Note the cast from Numer to String of variable y. What's more, I give a replace in the p element whenever I need to update it:

window.onload = function() {
  var pad = document.getElementById("res");
  document.getElementById("calcmult").onclick = function() {

    var contador = document.getElementById("cont").value;
    var num1 = document.getElementById("mul1").value;
    var num2 = document.getElementById("mul2").value;
    
    var i = 0;
    var x = 0;
    var y = 0;

    while (i <= contador && contador && num1 && num2) {
      if (x % num1 == 0 && x % num2 == 0) {
        y = y + x;
        i++;
      }
      x++;
    }


    var x = document.createElement("p");
    x.innerHTML = pad.innerHTML + " " + String(y);
    document.getElementsByTagName("body")[0].replaceChild(x, pad);
    pad = x;

    //zero os valores que estavam nos campos
    document.getElementById("cont").value = '';
    document.getElementById("mul1").value = '';
    document.getElementById("mul2").value = '';
  }
}

<p class="cont" id="res">A soma dos primeiros
  <input id="cont" type="number" name="num" min="0" max="100000000">multiplos de
  <input id="mul1" type="number" name="num" min="1" max="1000">e
  <input id="mul2" type="number" name="num" min="1" max="1000">é:</p>
<input type="button" value="Calcular" id="calcmult">

28.09.2015 / 22:29

0

Simple, because you're always reading the current html using pad.innerHTML . You would have to save the value of html at the beginning, not the element reference:

var pad = document.getElementById("res").innerHTML;

Fiddle

But I do not recommend this practice. Why not use an element at the end of the message to display the value? Example:

... é: <span id="resultado"></span>

And then, at the end of the script:

x = document.getElementById("resultado").innerText = y;

Fiddle

28.09.2015 / 22:30

Is it correct to use JSON to store data that does not need to be in a database? Queue with circular chained list with head

score 2 · Accepted Answer

It's because you're messing with objects.

The line

var pad = document.getElementById("res");

Do not create another object, it creates a reference, in the pad variable for the object that can be accessed by document.getElementById("res") .

To save a copy of the object, use the cloneNode function as follows:

var pad = document.getElementById("res").cloneNode(true);

The parameter is to copy all child elements, if they exist. This function also copies the id, so if it is to be added in the same document, it is recommended to change the id.

Reference: link