Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

id, name, hidden, function e outras dúvidas...

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! :)

4 respostas

Oi Clara, tudo bem?

Respondendo suas dúvidas:

1) Você pode utilizar tanto o name quanto o id no JS sendo que o id é realmente mais comum;

1.1) Não deveria ter funcionado utilizando o name não. Dá uma olhadinha se a página foi realmente recarregada com a alteração do id para o name pois a linha document.querySelector("#texto") está selecionando o elemento com o id "texto" e não o name. Tem que aparecer um erro no console dizendo que esta linha retorna null;

1.2) O hidden é necessário pois o navegador ele processa todo o HTML que está na sua página, então ele precisa saber que você não quer que este texto seja mostrado logo de cara. Colocando este hidden você está dizendo pro navegador esconder o texto caso contrário ele apareceria independentemente do clique no botão;

2) Acredito que o erro no console tenha ocorrido pois deve ter faltado alterar a função poema que chama o método mostra. Como você mudou o nome do método para traga você precisa mudar a chamada da função também. Sua funcão poema ficaria assim:

function poema()  {
    if(input.value == "melancolia") {
    var texto = document.querySelector("#texto"). innerHTML    
    traga(texto);
}

3) Sim, é possível. Ele está substituindo todo o conteúdo pois você está reescrevendo o document. Uma forma de fazer com que o texto apenas apareça é tirando o hidden do elemento. Sua função poema poderia ficar assim:

function poema()  {
    if(input.value == "melancolia") {
    document.querySelector("#texto").hidden = false
}

Na linha document.querySelector("#texto").hidden = false você está falando pro navegador que agora ele não precisa mais esconder o elemento com o id "texto".

Ficou um pouco mais claro? Qualquer dúvida só falar!

Abraço!

Muitíssimo obrigada, Joviane. Suas explicações foram bastante esclarecedoras.

Sobre a dúvida 2), o que eu queria fazer não é trocar o mostra(texto) para o traga(texto).

Eu quero criar uma função para que não seja necessário escrever:

document.querySelector();

E assim como faço com o document.write, usar uma função como o "mostra", para o programa não ser tão verboso.

No mais, o restante foi esclarecido. Abraços :)

solução!

Oi Clara,

Ah entendi o que você quer fazer! Neste caso você precisa que sua função traga retorne o valor que foi buscado na linha document.querySelector(parametro), algo como:

function traga(parametro)  {
    return document.querySelector(parametro)
}

Agora quem chamar esta função pode utilizar o valor retornado por ela.

Sem o return a função traga está sendo executada mas ela não devolve nada para quem a chamou, por isso o erro no console.

Abraço!

Obrigada!!!! :)