<meta charset="UTF-8">
<input>
<button> Este é o conteúdo escrito.</button>
<script>
let entrada = document.querySelector("input");
let botao = document.querySelector("button");
function exibeEntrada() {
alert(entrada.value);
}
/*
PROBLEMA: criar uma página com um campo de interação <input> e um botão <button> </button> que ao ser clicado mostre o conteúdo do input.
checklist de trás pra frente:
- mostrar conteúdo do input
- clicar no botão
- criar botão [<button> </button>]
- criar interação com o botão [button.onclick = funcao]; Ps: a variável "button" pode receber qualquer nome, porém no document.querySelector você tem que especificar com qual TAG HTML vocÊ quer interagir, neste caso seria ("button") = document.querySelector
- exibir conteúdo do input [alert(input.value);]
- escrever conteúdo no input;
- criar input;
- ler input e guardar numa variável [input.value];
ERROS: Ao criar o alert(input.value) para exibir o valor do input, eu esqueci q a variável criada para interagir com a TAG <input> foi "entrada"
O correto ficou: alert(entrada.value);
*/
botao.onclick = exibeEntrada;
/*
"Q: Pq o código acima aparece botao.onclick e não button.onclick ?"
"R: O botão acima chama a função exibeEntrada. Repare que é " botao.onclick " e não " button.onclick ", pois a variável criada para interagir com a TAG" <button> "se chama botao."
"Fiz isto para diferenciar do tutorial."
*/
</script>
