Make data written by the user be stored in a JS object

Asked

Viewed 147 times

1

I have this code and wanted to know how to make the user can press a button and, from that, store the data requested by the page in the JS object and, after that, display the message written in the code. Could anyone help? Thank you.

JS

var aluno = new Object ()
aluno.nome = document.getElementById("nome");
aluno.telefone = document.getElementById("telefone");
aluno.matricula = document.getElementById("matricula");

aluno.curso = new Object ()
    curso.nome = document.getElementById("curso");
    curso.campus = document.getElementById("campus");
    curso.turno = document.getElementById("turno");

document.write ("Olá " + aluno.nome + ", seu telefone é: " + aluno.telefone + " e sua matrícula é: " +
aluno.matricula + "." + " Você está matriculado no curso " + curso.nome + ", no campus " + curso.campus + 
" durante a parte da " + curso.turno)

HTML

        <h4>Dados do Aluno</h6>
        <p>Informe o seu nome: <input type="text" id="nome"></p>
        <p>Informe o seu telefone: <input type="number=" id="telefone"></p>
        <p>Informe a sua matrícula: <input type="number" id="matricula"></p>
    </div>
    <div class="curso">
        <h4>Dados do Curso</h6>
        <p>Informe o nome do seu curso: <input type="text" id="curso"></p>
        <p>Informe o seu campus: <input type="text=" id="campus"></p>
        <p>Informe a seu turno: <input type="text" id="turno"></p>
    </div>

2 answers

1

You’re taking the element, not its value. You need to take the value attribute of the input element, like this:

aluno.nome = document.getElementById("nome").value;

Ai vc puts all this JS code into a function, adds the function in an onclick event in the HTML button.

1


Besides putting .value as reported in Gabriel’s reply, you can do so by calling a function and sending the text into a div instead of using document.write:

function exibe(){
   var aluno = new Object();
   aluno.nome = document.getElementById("nome").value;
   aluno.telefone = document.getElementById("telefone").value;
   aluno.matricula = document.getElementById("matricula").value;
   
   aluno.curso = new Object ()
       curso.nome = document.getElementById("curso").value;
       curso.campus = document.getElementById("campus").value;
       curso.turno = document.getElementById("turno").value;
   
   document.getElementById("dados").innerHTML = "Olá " + aluno.nome + ", seu telefone é: " + aluno.telefone + " e sua matrícula é: " +
   aluno.matricula + "." + " Você está matriculado no curso " + curso.nome + ", no campus " + curso.campus + 
   " durante a parte da " + curso.turno;
}
<h4>Dados do Aluno</h6>
        <p>Informe o seu nome: <input type="text" id="nome"></p>
        <p>Informe o seu telefone: <input type="number=" id="telefone"></p>
        <p>Informe a sua matrícula: <input type="number" id="matricula"></p>
    </div>
    <div class="curso">
        <h4>Dados do Curso</h6>
        <p>Informe o nome do seu curso: <input type="text" id="curso"></p>
        <p>Informe o seu campus: <input type="text=" id="campus"></p>
        <p>Informe a seu turno: <input type="text" id="turno"></p>
    </div>
<button onclick="exibe()">Exibir dados</button>
<br>
<div id="dados"></div>

Browser other questions tagged

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