View sessionStorage data in a div

Question

I am doing an activity that consists of recording data obtained from a form in the sessionStorage with the Register button, and with the Display button, show the recorded data. I cannot show this recorded data in the div. How can I do?

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!");
    }
}

Answer 1

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

Another thing is that you are taking the values of the fields wrong. For example, the variable onome = $("#nome").val(sessionStorage.getItem("nome")); will return the element $("#nome"), and 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 data by lines:

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

result.html(dados);

The code of the function 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!");
    }
}