0

<div>
        <input placeholder="Adicionar morador no 1° Andar" type="text" id="name1" style="margin-bottom: 40px;"> 

        <input type="button" value="Adicionar" onclick="adicionarMorador1(); confirmacao1();"> 
        
        <p style="margin-top: -2%;" id="confirma1"></p>
    
</div>`

var andar1 = Array("Matheus")
     
        function adicionarMorador1() {
            var nome = document.getElementById("name1").value

            if (nome === "") {
                console.log("Insira um valor válido")
            } else {
                andar1.push(nome)
               // alert("Morador foi adicionado no 1° Andar")
                console.log(andar1)
            }
        }

        function confirmacao1 () {
            var x = "O morador foi adicionado no 1° andar";
            document.getElementById("confirma1").innerHTML = x;
            setTimeout(() => {
                x.close()
            }, 2000);
        }

        function ordenar1() {
            andar1.sort()
            console.log(andar1)
        }

Bom, tenho esses dois códigos, quando eu clico no botão adicionar ele dispara duas funções, uma ele joga no array andar1, e a outra manda um texto na página dizendo que o morador foi adicionado, porém eu queria que esse texto saísse depois de um tempo, usando o setTimeout, porém não consigo. Queria saber como eu faço o texto sair depois de um tempo determinado

1 Resposta 1

0

Existem diversas formas de resolver esse problema!

Usando apenas CSS

#invisivel {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

@-webkit-keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden;
    }
}

https://jsfiddle.net/h10dkfqc/

Usando Vanilla Javascript

function confirmacao1() {
    var x = "<p id='invisivel'>O morador foi adicionado no 1° andar</p>";
    document.getElementById("confirma1").innerHTML = x;
    setTimeout(() => {
        var elem = document.querySelector('#invisivel');
        elem.parentNode.removeChild(elem);
    }, 2000);
}

https://jsfiddle.net/ypo783rt/

Usando JQuery

function confirmacao1() {
    var x = "<p id='invisivel'>O morador foi adicionado no 1° andar</p>";
    document.getElementById("confirma1").innerHTML = x;
    setTimeout(() => {
        $('#invisivel').remove();
    }, 2000);
}

https://jsfiddle.net/8newfhps/1/

Qualquer uma dessas soluções deve resolver o seu problema. Espero que ajude!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .