Transform a variable value into a paragraph

Asked

Viewed 347 times

2

I want to know how to, instead of sending the result of the function to Alert, create a paragraph, for example. Remembering that this doubt is to help me with future projects, so I’m putting a very simple code.

Code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" lang="pt-br">
    <title>Formulário teste</title>
    <script type="text/javascript">
        function enviar(){
            var formulario = document.getElementById('formulario');

            var nome2 = formulario.nome.value;
            alert(nome2);

        }
    </script>
</head>
<body>
    <h1>Dados para cadastro</h1>

    <form id="formulario">
        <label for="nome">Nome:</label>
        <input id="nom" type="nome" name="nome">

        <label for="cpf">CPF:</label>
        <input type="cpf" name="cpf">

        <label for="cep">CEP</label>
        <input type="cep" name="cep">

        <button onclick="enviar()">Submit</button>
    </form>

    <h1 id="receber"></h1>

</body>
</html>
javascript dom

  • What do you mean? It wasn’t clear

  • Instead of alerting the input value, send to an HTML paragraph

2 answers

2

Can use Document.createelement. But add the attribute type="button" to the button Submit so that the page is not reloaded. See commented example:

function enviar(){
   var formulario = document.getElementById('formulario');
  
   var nome2 = formulario.nome.value;
   var paragrafo = document.createElement("p"); // crio o elemento <p>
   var texto = document.createTextNode(nome2); // defino o texto
   paragrafo.appendChild(texto); // insiro o texto no elemento <p>
   document.body.appendChild(paragrafo); // insiro na página
}
<h1>Dados para cadastro</h1>

 <form id="formulario">
     <label for="nome">Nome:</label>
     <input id="nom" type="nome" name="nome">

     <label for="cpf">CPF:</label>
     <input type="cpf" name="cpf">

     <label for="cep">CEP</label>
     <input type="cep" name="cep">

     <button onclick="enviar()" type="button">Submit</button>
 </form>

 <h1 id="receber"></h1>

  • Ah, Pocha. Thank you very much!

0


In this example the H1 tag will receive the contents of the variable only when the send function is triggered, if you want to remove the code from the function and put it in another one, then you will have several options to call the function even automatically when the page is finished being loaded. Example 2.

Example 1

<h1 id="receber"></h1>  

<script>
    function enviar(){
        var formulario = document.getElementById('formulario');

        var nome2 = formulario.nome.value;
        //alert(nome2);
       document.getElementById( 'receber' ).innerHTML = nome2;
    }
</script>

Example 2

<script>
  $( document ).ready( function () {
    document.getElementById( 'receber' ).innerHTML = nome2;
  } );
</script>

  • Thanks Hugo! This way it is easier even to style html.

Browser other questions tagged javascript dom

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