Display sessionStorage data in a div

I am doing an activity that consists of recording data obtained from a form in sessionStorage with The Register button, and with The View button, show the recorded data. I can't show this data written to the div. How can I do it?

Here's what I've done so far 

window.addEventListener("load", function(){
    document.querySelector("#cad").addEventListener("click", cadastrar);
    document.querySelector("#exibir").addEventListener("click", exibir);

})

function cadastrar() {
    if(typeof(sessionStorage) == 'undefined'){
        alert("Seu navegador não suporta HTML5 localStorage.")
    }else{
    var nome = window.sessionStorage.setItem("nome", $("#nome").val());
    var rgm = window.sessionStorage.setItem("rgm", $("#rgm").val());
    var par = window.sessionStorage.setItem("nota_parcial", $("#nota_parcial").val());
    var pro = window.sessionStorage.setItem("nota_pro", $("#nota_pro").val());
    var reg = window.sessionStorage.setItem("nota_regi", $("#nota_regi").val());

    }
}

function exibir(){
    if (sessionStorage.length > 0){
    var result = $("#resp");

    onome =  $("#nome").val(sessionStorage.getItem("nome"));
    orgm =  $("#rgm").val(sessionStorage.getItem("rgm"));
    npar =  $("#nota_parcial").val(sessionStorage.getItem("nota_parcial"));
    npro =  $("#nota_pro").val(sessionStorage.getItem("nota_pro"));
    nreg =  $("#nota_regi").val(sessionStorage.getItem("nota_regi"));

   result.innerHTML += onome;
   result.innerHTML += orgm;
   result.innerHTML += npar;
   result.innerHTML += npro;
   result.innerHTML += nreg;
    }else{
        alert("Nada foi Gravado!");
    }
}
Author: Sam, 2019-11-25
Source

1 answers

The problem is that you are the objects in the wrong way. For example, the variable var result = $("#resp"); is a jQuery object that does not use .innerHTML. To insert HTML into an element with a jQuery object you use .html() and not .innerHTML.

Another thing is that you are picking up the values of the fields in the wrong way. For example, the variable onome = $("#nome").val(sessionStorage.getItem("nome")); will return the element $("#nome"), not its value.

There are some ways to solve this, and one of them is to create a new variable with the values using .val() and then use .html() to display these values in the div: 

var dados = onome.val()
+ orgm.val()
+ npar.val()
+ npro.val()
+ nreg.val();

result.html(dados);

In the variable dados you can even put <br> to separate the data by rows: 

var dados = onome.val() + '<br>'
+ orgm.val() + '<br>'
+ npar.val() + '<br>'
+ npro.val() + '<br>'
+ nreg.val();

result.html(dados);

The function code exibir() would look like this: 

function exibir(){
    if (sessionStorage.length > 0){
    var result = $("#resp");

    onome =  $("#nome").val(sessionStorage.getItem("nome"));
    orgm =  $("#rgm").val(sessionStorage.getItem("rgm"));
    npar =  $("#nota_parcial").val(sessionStorage.getItem("nota_parcial"));
    npro =  $("#nota_pro").val(sessionStorage.getItem("nota_pro"));
    nreg =  $("#nota_regi").val(sessionStorage.getItem("nota_regi"));

   var dados = onome.val() + '<br>'
   + orgm.val() + '<br>'
   + npar.val() + '<br>'
   + npro.val() + '<br>'
   + nreg.val();

   result.html(dados);

    }else{
        alert("Nada foi Gravado!");
    }
}
 1
Author: Sam, 2019-11-25 12:29:04