0

Galera, eu to fazendo um pequeno codigo em JS, nele eu preciso salvar os valores iniciais do meu html. Eu tenho um campo paragrafo(<p>) que inicia de uma forma, eu queria salvar o estado inicial deste paragrafo para eu sempre comparar o estado atual com o estado inicial, mas por algum motivo isso não esta funcionando.

A linha de codigo do HTML:

<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>

Codigo JS:

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 = '';
    }
}

Por algum motivo ele salva o estado inicial toda hora, fazendo com q o estado inicial mude e não fazendo o efeito que eu quero. Agora quando eu calculo ele, na segunda execução, concatena os valores de resposta ao invés de simplesmente comparar com o estado inicial, que ainda não tem resposta, e dar apenas um valor.

Meu objetivo final é, por exemplo, tenho o seguinte paragrafo:

Digite o primeiro numero para somar o valor ________, digite o segundo ______, a soma é: resultado.

Eu quero que o resultado fique no mesmo paragrafo, eu sei que é mais facil criar outro paragrafo, mas eu queria fazer no mesmo por razões de desafio. Alguem sabe como resolver o meu problema? Obrigado

Obs: Essas imagens devem ajudar a entender melhor o problema:

Estado Inicial:

Estado Inicial

Depois de realizar um calculo:

Depois de realizar um calculo

Depois do segundo calculo, estado atual do codigo:

Depois do segundo calculo, estado atual

Segundo calculo, objetivo final:

Segundo calculo objetivo

3 Respostas 3

2

É porque está mexendo com objetos.

A linha

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

Não cria outro objeto, ela cria uma referência, na variável pad para o objeto que pode ser acessado por meio de document.getElementById("res").

Para salvar uma cópia do objeto, use a função cloneNode, desta forma:

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

O parâmetro é para copiar todos os elementos filhos, caso existam. Esta função copia também o id, então, se for adicionar no mesmo documento, é recomendável mudar o id.

Referência: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

1
  • Aeee, deu certo! Obrigado mesmo, nos cursos que eu fiz (online) nenhum mostrou esse cloneNode, mas enfim obrigado! :3
    – Alecell
    Commented 28/09/2015 às 20:55
0

Seria isso? Observe o cast de Numer para String da variável y. Além do mais eu dou um replace no elemento p sempre que preciso atualiza-lo:

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">

1
  • Não, este trecho acaba fazendo o mesmo que o meu codigo já faz =/
    – Alecell
    Commented 28/09/2015 às 20:57
0

Simples, porque você está sempre lendo o html atual usando pad.innerHTML. Você teria que guardar o valor do html no início, e não a referência do elemento:

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

Fiddle

Mas eu não recomendo essa prática. Porque não usar um elemento ao final da mensagem para exibir o valor? Exemplo:

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

E então, ao final do script:

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

Fiddle

2
  • A versão do inner deu NaN e.e, mas eu sei q podia fazer isso criando um span, mas eu queria mesmo tentar no mesmo html. hm
    – Alecell
    Commented 28/09/2015 às 20:54
  • @AlexandreGomes deve ter faltado o y.toString(); na hora de concatenar. Dá uma olhada na linha 22 da primeira demo. Commented 28/09/2015 às 20:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .