Table innerHTML text appears and disappears on time

Asked

Viewed 1,015 times

0

I’m doing a sort of registration with the localStorage, and using a counter to put with the name, thus differentiating one from the other. And then in a loop to show the result in a table with innerHTML, then this problem, appears and at the same time some.

Html code:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <title>HTML5 - Estrutura Básica</title>
    <link rel="stylesheet" href="css/cadastro.css" />
    <script src="js/script.js"></script>

</head>
<body>
    <form>
        <fieldset id="usuario">
        <legend>Cadastro</legend>
        <p><label for="cCodigo">Código:</label> <input type="text"  id="cod" name="Codigo"  size="10" maxlength="10" placeholder=" Código"/> </p>
        <p><label for="cNome">Nome:</label> <input type="text" id="name" name="Nome"  size="35" maxlength="35" placeholder=" Nome Completo" /></p>
        <p><label for="cIdade">Idade:</label> <input type="text" id="age" name="Idade"  size="5" maxlength="5" placeholder=" Idade" /></p>


    <input type="submit" value="Salvar" onClick="salvar()" />
    <input type="submit" value="Mostrar" onClick="mostrar()" />
    <input type="submit" value="Total" onClick="total()" />
    <input type="submit" value="Limpar" onClick="limpar()" />
    </fieldset>
    </form>


    <table border="1" id="tabela">
    <tr>
    <th>Nome</th>
    <th>Idade</th>
    </tr>
    </table>

</body>

Javascript code:

function salvar(){
            var cod = document.getElementById("cod").value;
            localStorage.setItem("nome" + cod, document.getElementById("name").value);
            localStorage.setItem("idade" + cod, document.getElementById("age").value);
            alert("Dados Atualizados");

        }

        function mostrar(){
            var i = 1
            while (i < (localStorage.length/2)+1){
            document.getElementById("tabela").innerHTML += "<tr>" + "<td>" + "NOME : " + localStorage.getItem("nome" + i)+ "</td>" + "<td>" + "IDADE :" + localStorage.getItem("idade" + i) + "</td>" + "</tr>" 
                i++;

            }

        }


        function total(){
            alert(localStorage.length/2);

        }


        function limpar(){
            i = 0;
            cod = 0;
            localStorage.clear();
            alert("Dados apagados!")
        }

If anyone can help, thank you :DD

javascript html

1 answer

1

In his job mostrar, add at the end of it return false.

By adding the return false vc causes the method to stop its execution of its function and also makes the page in your case not of a Reload.

  • 1

    Check out where the answers go so short: http://i.stack.Imgur.com/q06bz.png. The action to take is "Looks OK", but anyway, here’s the hint.

  • blza. my intention is to help and not write a book without need :)

  • 1

    Certainly, everyone answering here is offering free help and the size of the help is not a "per se" problem. One brief explanation, though, of why your code solves the problem is the difference between "okay" and "oh, I get it!" :)

  • I put the false Return after closing the loop, as you said at the end of the function and continues the same thing :(

Browser other questions tagged javascript html

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