Textos grandes e organizados dentro do <script> | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Clara Lessa

| 28.7k xp | 83 posts

Estou fazendo este programa, e gostaria de saber de que forma posso manter essa estética original do texto abaixo, e ao mesmo tempo fazê-lo aparecer no programa.

<meta charset="UTF-8">


<script>
    function pulaLinha()   {
        document.write("<br><br>");

}
    function mostra(frase)   {

        document.write(frase)
        pulaLinha();


}

    mostra("<h1><big><center>Power of poetry</center></h1></big>");

    pulaLinha();

    mostra("<hr>");

    var perg1 = prompt("Você prefere poesias melancólicas ou felizes?")

    if(perg1 == "melancólicas")  {

        mostra("<big>Você talvez goste disso:</big>")
    //este aqui
    mostra("O mundo de um homem só. 
Rodeado 
Porque, se tinha uma coisa que tinha nesse mundo 
Era gente.  

A vida de um homem só  
Rodeada  
Porque, se tinha um coisa que tinha nessa vida  
Era gente.  

Tanta gente de um homem só 
Tanto amigo do homem só 
Tanto tudo que nada era só  
Ou tão somente 

Rodeado 
Porque, se tinha uma coisa que tinha nesse homem  
Era gente.  

Passos  
Andam  
Passando 
Rápido 
Demais 

E assim segue o homem nesse mundo rodeado de homens sós.")





}

    if(perg1 == "felizes")   {


}




</script>

4 respostas

por Walteann Costa

| 220.8k xp | 13 posts

Desenvolvedor Front End Pleno V

06/08/2017

vê se é esse o resultado que vc quer.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

    <title></title>
</head>
<body>
    <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><br>");

    }
        function mostra(frase)   {
            document.write(frase)
            pulaLinha();
    }

        mostra("<h1><big><center>Power of poetry</center></h1></big>");

        pulaLinha();

        mostra("<hr>");

        var perg1 = prompt("Você prefere poesias melancólicas ou felizes?")

        if(perg1 == "melancólicas")  {

            mostra("<big>Você talvez goste disso:</big>")
        //este aqui
        var texto = document.querySelector("#texto").innerHTML;
        //console.log(texto);
        mostra("<p>"+texto+"</p>");

    }

        if(perg1 == "felizes")   {

    }

    </script>
    </body>
</html>

nesse caso eu criei um paragrafo

e coloquei todo seu texto nele, incluido um id, e o atributo hidden pra que ele não fique visivel.

depois no script, criei uma variavel texto que buscava o texto do paragrafo no html, atraves do selector document.querySelector(). e usei a funcao innerHTML para que pega-se o texto com os que eu adicionei no paragrafo, depois coloquei a variavel texto como parametro na funcao mostrar()

por Clara Lessa

| 28.7k xp | 83 posts

06/08/2017

Obrigada! Mas você poderia me dizer o porquê de ter colocado o texto fora do

por Clara Lessa

| 28.7k xp | 83 posts

06/08/2017

Obrigada! Mas você poderia me dizer o porquê de ter colocado o texto fora do script?

E se possível dissertar um pouco mais sobre a função do atributo hidden e a função innerHTML?

Desde já, meu muito obrigada! :)

solução!

por Walteann Costa

| 220.8k xp | 13 posts

Desenvolvedor Front End Pleno V

06/08/2017

por que o paragrafo

é uma tag HTML e não trabalha dentro de um script( Javascript).

sobre o hidden, se vc tira, mesmo quando for testa vai aparecer duas vezes, por que ele vai ta visível. Então eu coloquei por que mesmo se "melancólicas" não force a opção escolhida ele não ira aparecer na pagina. ele fica escondido.

Sobre o innerHTML: resumindo tudo "o innerHtml vai pegar o que você passou e aplicar como elementos html na página."