Como puxar uma variavel de <script> para <body>?

27 de julho de 2019 5 respostas Resolvido

SneazyBr 27 de julho de 2019

Bom, eu começei a mexer no java script bem recentemente, sou bem iniciante, e eu queria saber 2 coisas.
1o Tem como puxar uma variavel feita dentro da area do para a area do para sair em forma de texto?
2o Tem como criar textos no meio do de forma q apareçam na tela do navegador?

Registro de teste

Boas vindas! Nao sei oque é isso, mas irei dar dados pessoais dos alunos registrados em nossa… ahn… faculdade?(mesmo sendo ilegal)

Registro de teste

Boas vindas! Nao sei oque é isso, mas irei dar dados pessoais dos alunos registrados em nossa... ahn... faculdade?(mesmo sendo ilegal)

<script>
        var alunos = ['Luiz Carlos','Maria Joaquina','Deasy Lessa','Douglas Muniz'];
     
        var Luiz_Carlos = {
            Idade: 10,
            Peso: 40,
        };
        var Maria_Joaquina = {
            Idade: 15,
            Peso: 60,
        };
        var Deasy_Lessa = {
            Idade: 23,
            Peso: 60,
        };
        var Douglas_Muniz = {
            Idade: 25,
            Peso: 70,
        }; 
    </script>

 EU QUERO PUXAR AS VARIAVEIS Q TEM DENTRO DA AREA DE SCRIPT PRA CA, COMO?


</body>

5 Respostas

Matheus_Campelo 27 de jul. de 2019

<script>
document.getElementById("imprime").innerHTML="";
for(var i=0;i<alunos.length;i++){
document.getElementById("imprime").innerHTML += alunos[i]+"<br>";
}
</script>
<p id="imprime"></p>

Desta forma é possível passar do script para o body

SneazyBr 27 de jul. de 2019

entao, n é bem isso, eu queria que na pagina, aparecesse algo, como eu escrevesse ''Luiz_carlos" de algum jeito, e na pagina aparecesse a idade e o peso dele

ex doq eu queria na tela:
Luiz Carlos
idade:10
peso: 40

Matheus_Campelo 27 de jul. de 2019

Muda seu código para var alunos = [Luiz_Carlos,Maria_Joaquina…]
e no var Luiz_Carlos = {Nome: Luiz Carlos, Idade: 10…} acrescenta o nome.
E no for que te mandei bota ‘alunos[i].nome’ para imprimir o nome .idade para idade e assim sucessivamente.

Solucao aceita

Giansouzafreitas 30 de jul. de 2019 1 like

@SneazyBr para fazer isso é melhor mudar um pouco o código:

<script>
    var alunos = [
        {
            nome: 'Luiz Carlos',
            idade: 10,
            peso: 40
        },
        {
            nome: 'Maria Joaquina',
            idade: 15,
            peso: 60
        },
        {
            nome: 'Deasy Lessa',
            idade: 23,
            peso: 60
        },
        {
            nome: 'Douglas Muniz',
            idade: 25,
            peso: 70
        },
    ];

    var listaContainer = document.getElementById('alunos-lista');
    var listaHTML = '';

    for(var i = 0; i < alunos.length; i++) {
        listaHTML += '<li>';
        listaHTML += '<b>Nome:</b> ' + alunos[i].nome + '<br />';
        listaHTML += '<b>Idade:</b> ' + alunos[i].idade + '<br />';
        listaHTML += '<b>Peso:</b> ' + alunos[i].peso;
        listaHTML += '</li>';
    }

    listaContainer.innerHTML = listaHTML;
</script>

Transformei o array alunos em um array de objetos, cada objeto representa um aluno, com as propriedades nome, idade e peso. Agora basta iterar o array e imprimir a lista.
No body do HTML coloque uma <ul> com ID alunos-lista.
O que estamos fazendo aqui não é “puxar uma variavel js para o HTML”, o que estamos fazendo é injeção de conteúdo via JavaScript.
Outra forma, mais avançada de fazer isso é com pré-processamento de HTML, utilizando uma linguagem de back-end como Python, PHP, Ruby, NodeJS, etc.

Gabriel_Serafim 28 de ago. de 2019

não entendi muito bem @SneazyBr … seria isso ?

<script type="text/javascript">
        let Nomes=[{nome:"Gabriel",idade:21,sexo:"masculino"},{nome:"Fulano",idade:33,sexo:"feminino"}]

        for (let n = 0; n < Nomes.length; n++) {
            document.write('Meu nome é '+Nomes[n].nome+' , tenho '+Nomes[n].idade+' anos e meu sexo é '+Nomes[n].sexo + '<br>')          
        }      
    </script>

Criado 27 de julho de 2019

Ultima resposta 28 de ago. de 2019

Respostas 5

Participantes 4

5 Respostas

Topicos relacionados