2

function apagar(){
    let note = document.getElementsByClassName("txt")[0].value


    console.log(note + " (Antes do if. Não é para aparecer vazio) - Correto")
    
    if(note !== ""){
        note = ''
    }
    else{
        console.log('nao ta')
    }
    
    console.log(note + " (depois do if. É para aparecer vazio) - Correto")
}

// So que não some da caixa do textarea o value(Texto colocado)
body{
    margin: 0;
    padding: 0;
    background-color: rgb(46, 49, 49);
    color: white;

}


.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title{
    text-transform: uppercase;
}
.notescontainer{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgb(46, 49, 49);
    flex-wrap: wrap;
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 5px 5px;
    border: 2em black;
    grid-template-areas:
        ". . ."
        ". . ."
        ". . ."; */
    
}

.note{
    border-radius: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.txt{
    background-color: rgb(224, 221, 48);
    resize: both;
    overflow: auto;
}

textarea{
    font-size: 12px;
    overflow: hidden;
}

p{
    margin-bottom:5px;
}

.titlenote{
    background-color: rgb(46, 49, 49);
    text-align: center;
    color: white;
    width: 100%;
    margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Bloco de notas</title>
</head>

<body>

    <div class="container">
        <h1 class="title">Bloco de notas</h1>
        <button>Salvar notas</button>
        <div class="notescontainer">
            <div class="note">
                <input type="text" class="titlenote" placeholder="Titulo">
                <textarea name="nota" class="txt" cols="40" rows="8" placeholder="DIGITE AQUI SUA NOTA"></textarea>
                <button onclick="apagar()">apagar</button>
            </div>
    
        </div>
    </div>
    <script src="./script.js"></script>
</body>

</html>

Estou criando uma função que quando clicada ela limpa o textarea. So que estou com um problema que no console.log diz que esta apagado, mas no textarea mesmo, o texto continua, Segue abaixo.

https://gyazo.com/7822d2ce12536226836b436ed2276761

Os console.log que coloquei foi para identificar algum erro, mas aparentemente não tem, o único que vejo é que, diz sim esta vazio o value(texto colocado no caso), mas não apaga ao clicar no botão.

1

1 Resposta 1

3

O problema é que tu tá limpando o valor da variável que recebeu o conteúdo do textarea, e não o próprio value.

const note = document.getElementsByClassName("txt")[0] // nao especifica aqui o campo value

console.log("antes",note.value)

note.value = "" // aqui limpa o value do elemento que tu guardou na variavel, ao inves de limpar o valor dela

console.log("depois",note.value)
2
  • Obrigado, funcionou exatamente como eu estava esperando.
    – Danilo
    12/04/2022 às 1:58
  • Top, fico feliz em ajudar! 12/04/2022 às 18:16

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 .