Estou tentando aplicar uma classe por meio do classList.add após o click de um botão que chama uma função. Porém não acontece nada. Tentei com display: none e visibility:hidden e não consegui.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/first.css">
<title>nome</title>
</head>
<body>
<h1 id="titulo">Olá, qual é seu nome?</h1>
<input id="campo"></input>
<button id="botao" onclick = "troca()" on>Click</button>
<div class="opcoes">
<h2>O que deseja fazer?</h2>
</div>
<script>
var nome = document.querySelector("#campo");
var texto = document.querySelector("#titulo");
var botao = document.querySelector("#botao");
function troca(){
texto.textContent = "Olá, " + nome.value
nome.classList.add("#input-esconde");
botao.classList.add("#botao-esconde");
}
console.log(texto);
</script>
</body>
</html>css
.opcoes{
visibility: hidden;
}
#botao-esconde{
display:none;
}
#input-esconde{
display:none;
