Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como imprimir o valor de um var em JS para HTML

por Lucas Amaral Taylor
| 130.7k xp | 59 posts

Olá, estou desenvolvendo um programa que calcula o valor de Delta S, consegui criar um formulário para inserir os valores só que não sei passar o resultado pra HTML Eis os códigos: HTML

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title> Exemplo</title>
  </head>
  <body>
    <h1> Exemplo </h1>
    <form id="Dados-deltaS">
        <div class="grupo">

            <label for="distancia-inicial">Espaço Inicial:</label>
            <input id="distancia-inicial" name="distancia-inicial" type="text" placeholder="Digite o valor de Si em metros" class="campo">

       </div>

        <div class="grupo">
            <label for="distancia-final">Espaço Final</label>
            <input id="distancia-final" name="distancia-final" type="text" placeholder="Digite o valor de Sf em metros" class="campo">
            </div>

        <button id="calcule-deltaS" > Calcule! </button>
    </form>
    <script src="js/variação-distancia.js"></script>
  </body>
</html>

JS: 


var si = document.querySelector("#distancia-inicial");
var sf = document.querySelector("#distancia-final");

var botaodeltaS = document.querySelector("#calcule-deltaS");
addEventListener("click", function(event) {
        event.preventDefault();
var form = document.querySelector("#Dados-deltaS")

var distanciaInicial = si.value;
var distanciaFinal = sf.value;

var DeltaS = distanciaFinal- distanciaInicial;
var DeltaSp = document.createElement("p");

DeltaSp.textContent = DeltaS;
});

Eu tentei utilizando document.createElement("p"), mas não consegui, queria saber o pq de não funcionar

1 resposta
solução!
por Rene de Sena Souza
| 103.2k xp | 90 posts
Estagiário

Fala aí Lucas! Tudo bem ?

Então, testei seu código e estava apenas faltando você definir um pai para o elemento que você criou usando a função appendChild. Essa função cria um nó no DOM e devolve uma referência ao nó adicionado.

Você pode conferir a especificação completa através da documentação: https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild.

var si = document.querySelector("#distancia-inicial");
var sf = document.querySelector("#distancia-final");

var botaodeltaS = document.querySelector("#calcule-deltaS");

botaodeltaS.addEventListener("click", function(event) {
event.preventDefault();

var form = document.querySelector("#Dados-deltaS");

var distanciaInicial = si.value;
var distanciaFinal = sf.value;

var DeltaS = distanciaFinal - distanciaInicial;

var DeltaSp = document.createElement("p");
//Definindo o pai do elemento criado.
form.appendChild(DeltaSp);

DeltaSp.textContent = DeltaS;

});

Espero ter ajudado. :)

Bons Estudos! Abraço!