Fiz um programa e ao final do mesmo, deparei-me com algumas dúvidas.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Olá</title>
</head>
<body>
<h1><center>POWER OF POETRY</h1></center>
<hr><hr>
<br><br>
<center>Felicidade ou Melancolia?</center>
<center><input></center>
<center><button>OK</center></button>
<p id="texto" hidden> O mundo de um homem só. Rodeado<br/>
Porque, se tinha uma coisa que tinha nesse mundo <br>
Era gente.<br><br>
A vida de um homem só<br>
Rodeada <br>
Porque, se tinha um coisa que tinha nessa vida<br>
Era gente.<br><br>
Tanta gente de um homem só<br>
Tanto amigo do homem só <br>
Tanto tudo que nada era só<br>
Ou tão somente<br><br>
Rodeado <br>
Porque, se tinha uma coisa que tinha nesse homem<br>
Era gente. <br><br>
Passos <br>
Andam <br>
Passando <br>
Rápido <br>
Demais <br>
<br>
E assim segue o homem nesse mundo rodeado de homens sós.</p>
<script>
function pulaLinha() {
document.write("<br>");
}
function mostra(frase) {
document.write(frase)
}
var input = document.querySelector("input")
function poema() {
if(input.value == "melancolia") {
var texto = document.querySelector("#texto"). innerHTML
mostra(texto);
}
}
var button = document.querySelector("button")
alert();
button.onclick = poema;
</script>
</body>
</html>
1) A primeira dúvida refere-se a uso do id ou name e o porquê da necessidade do hidden.
<p id="texto" hidden>
1.1)Sei que o id é utilizado geralmente para funções em jvscript, porém, por curiosidade, troquei por "name" e o resultado foi o mesmo. Por que nesse caso não houve alteração no programa se o uso desse dois atributos são diferentes?
1.2)Por qual motivo o hidden é necessário para que o texto só apareça quando for solicitado, se ao final do programa eu deixei claro que só apareceria a mensagem quando o "button" fosse clicado?
2)Outra dúvida que tive foi sobre o uso do function. Nas aulas anteriores aprendemos que isso poderia ser feito :
function mostra(frase) {
document.write(frase)
}
Seguindo a mesma lógica, fiz :
function traga(parametro) {
document.querySelector(parametro)
}
E quando abri o console disse que tinha algum erro. Porque não deu certo?
3) Por último, é importante salientar que o programa exerceu a função por mim esperada. Porém gostaria de saber se há algum jeito de fazer com que quando eu clicasse no button o texto aparecesse logo a baixo, e não em uma página em branco, como está ocorrendo.
Desde já, muito obrigada! :)