Objeto nao aparece na tela

1. Objeto nao aparece na tela

cacabrazil
(usa Outra)

Enviado em 06/06/2021 - 00:25h

Entao, tenho esse codigo ai bugado, "document.getElementById('nomeSala').innerHTML = salas.PAnoA[0].nome;" no final, ele diz que e undefined, mas n sei pq,
"salas.PAnoA[0].nome", esta certo, pois ja consegui ver o valor dentro com um alert, so que em outro bloco de codigo, estou desconfiado qe e alguma coisa relacionado ao escopo, mas coloquei tudo pra fora, todas as variaveis, pra n ter problema. Mas ainda tem kkk. "salas.PAnoA[0].nome", aqui dentro teria um nome, que e puxado de um outro aquivo HTML, tenho ctz que o problema nao esta la, mas nesse ai embaixo.



var salas={



}

var cont = 0

var nomeTurma

var letra

var Turma

var nomeTurmaP

var nomeTurmaS

var nomeTurmaT

var nomeAluno

/* 

var salas=[nomeTurmaP + letra] = [0]

salas[nomeTurmaP + letra][0] = {

    nome: document.getElementById("inputext" + 0).value,

    idade: 2021 - (document.getElementById("inputnumber" + 0).value),

    sexo: document.getElementById("inputsexo" + 0).value



} 

 */





if (localStorage.getItem('logado') == 'false') {

    window.location.href = './login.html';

}



function sair() {

    localStorage.getItem('logado') = 'false'

}



function mostrar() {

    document.getElementById('container-consultar').style.display = "none"



    if (document.getElementById('container-anos').style.display == "none") {

        document.getElementById('container-anos').style.display = "block"

    } else {

        document.getElementById('container-anos').style.display = "none"

    }

}







document.getElementById("user").addEventListener('click', function () {



    if (document.getElementById('btn-sair').style.display == "none") {

        document.getElementById('btn-sair').style.display = "block";

    } else {

        document.getElementById('btn-sair').style.display = "none";

    }



});



//add alunos 

document.getElementById('add-alunos').addEventListener('click', function () {

    alert(cont)

    var alunos = '<label id="input' + cont + '" style="display:inline-block;"><input type="text" id="inputext' + cont + '" required placeholder="Nome do Aluno"> <input type="number" placeholder="Ano de nascimento" id="inputnumber' + cont + '" required> <select id="inputsexo' + cont + '"><option >Masculino</option value="Masculino"><option>Feminino</option value="Feminino"></select></label><label id="notas"><input type="number" required placeholder="Nota 1" class="notas" id="nota1"></input><input type="number" required placeholder="Nota 2" class="notas" id="nota2"></input><input type="number" required placeholder="Nota 3" class="notas" id="nota3"></input><input type="number" class="notas" id="nota4" placeholder="Nota 4" required></input></label><br><br>'

    cont = cont + 1

    document.getElementById('container-criaralunos').innerHTML = document.getElementById('container-criaralunos').innerHTML + alunos



});

/* fim */



//remove alunos 

function removerAlunos() {

    if (cont != 0) {

        cont = cont - 1

    }



    document.getElementById("input" + cont).remove();

}

/* fim */



/* valida informaçoes do submit*/



document.querySelector('form').addEventListener('submit', function (event) {



    nomeTurma = document.getElementById('selecionar_nome').value

    letra = document.getElementById('selecionar_nomeano').value





    if (document.getElementById('inputext0') != null) {

        nomeTurma = document.getElementById('selecionar_nome').value;

        letra = document.getElementById('selecionar_nomeano').value;

        Turma = nomeTurma + letra;



        //letras = ['A','B', 'C','D', 'E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];





        for (i = 0; i < cont; i++) {



            if (nomeTurma == '1Ano') {

                nomeTurmaP = 'PAno'



                salas[nomeTurmaP + letra] = [i]

                salas[nomeTurmaP + letra][i] = {

                    nome: document.getElementById("inputext" + i).value,

                    idade: 2021 - (document.getElementById("inputnumber" + i).value),

                    sexo: document.getElementById("inputsexo" + i).value



                }

                

                //nomeAluno = salas.PAnoA[0].nome



            }

            if (nomeTurma == '2Ano') {

                nomeTurmaS = 'SAno'



                salas[nomeTurmaS + letra] = [i]

                salas[nomeTurmaS + letra][i] = {

                    nome: document.getElementById("inputext" + i).value,

                    idade: 2021 - (document.getElementById("inputnumber" + i).value)

                }



            }

            if (nomeTurma == '3Ano') {

                nomeTurmaT = 'TAno'



                salas[nomeTurmaT + letra] = [i]

                salas[nomeTurmaT + letra][i] = {

                    nome: document.getElementById("inputext" + i).value,

                    idade: 2021 - (document.getElementById("inputnumber" + i).value)

                }



            }





        }





    }



    if (document.getElementById('inputext0') == null) {

        //alert("erro")

        event.preventDefault();

        document.getElementById('erro').style.display = "block";

    }





}); //alert(salas.PAnoA[0].nome+'oi')

/* consulta informaçoes dos alunos */

document.getElementById('consultar-turma').addEventListener('click', function () {



    document.getElementById('container-anos').style.display = "none"

    //alert(salas.PAnoA[0].nome)







    if (document.getElementById('container-consultar').style.display == "none") {

        document.getElementById('container-consultar').style.display = "block"

    } else {

        document.getElementById('container-consultar').style.display = "none"

    }

    // alert(nomeAluno)

    document.getElementById('nomeSala').innerHTML = salas.PAnoA[0].nome;



})





@import url('https://fonts.googleapis.com/css2? family = Roboto: wght @ 300 & display = swap');



body {

    margin: 0;

    padding: 0;

    font-family: 'Roboto', sans-serif;

    height: 100%;

    background: url(../banco_de_imagens/Background.png);

    color:#fff;

}



html {

    margin: 0;

    padding: 0;

    font-family: 'Roboto', sans-serif;

    height: 100%;

    width: 100%;

}



nav {

    background: #4B4697;

    width: 100%;

    height: 8vh;

    margin: 0;

    box-sizing: border-box;

    box-shadow: #373370 2px 2px 10px 2px;

  /*   border-bottom:2px solid #2b2666; */

}



#user {

    width: 40px;

    height: 40px;

    position: absolute;

    left: 94%;

    border: 2px solid rgb(223, 218, 218);

    border-radius: 100%;

    background: rgba(15, 15, 15, 0.418);

    display: inline-block;

}



#sistemaescolar {

    margin: 0;

    width: auto;

    padding-left: 5%;

    padding-top: 0%;

    display: inline-block;

    color: rgb(255, 255, 255);

    font-weight: 600;

    font-size: 30pt;

}



ol {

    display: inline-block;

    margin: 0;

}



#btn-sair {

    background: white;

    border: 2px solid rgba(196, 189, 189, 0.664);

    position: absolute;

    width: 90px;

    height: 40px;

    text-align: center;

    margin: 0px 0vh 0vh -1%;

    left: 198vh;

    list-style: none;

    text-decoration: none;



}



 .tag-grouping {

    font-weight: 600;

    font-size: 15pt;

    border: 2px solid rgba(0, 0, 0, 0.041);

    width: 25vh;

    height: auto;

    background: rgba(92, 89, 89, 0.199);

    cursor: pointer;

    margin-left: 25%;

    margin-top: 5%;

    text-align: center;

    display: inline-block;

} 



.tag-grouping:active {

    background: rgba(92, 89, 89, 0.383);

}









#img-mais, #img-lupa {

    width: 11%;

    height: 11%;

}





#container-anos {

    background: rgba(165, 162, 162, 0.308);

    height: auto;

    width: 50%;

    margin: 0% auto 0% auto;

    padding-left: 15px;

    font-family: 'Roboto', sans-serif;

    font-size: 18pt;

    border-radius: 5%;

    box-shadow: rgb(36, 36, 36) 0px 2px 20px 2px;

}



#container-ano>select {

    display: inline-block;

}



select {

    font-size: 15pt;

}



input {

    display: inline-block;

    outline: none;

    border: none;

    width: 50%;

    height: 15%;

    margin-bottom: 1%;

    font-size: 18pt;

}



input[type="number"] {

    display: inline-block;

    outline: none;

    border: none;

    width: 25%;

    height: 15%;

    margin-bottom: 1%;

    font-size: 18pt;



}



#add-alunos {

    cursor: pointer;

}



#remove-alunos {

    cursor: pointer;

}

#nota1, #nota2, #nota3, #nota4{

    width: 15%;

}





button {

    margin: auto;

}

#erro{

    font-weight: 100;

    text-align: center;

    margin: 4% auto 4% -15px;

    text-indent: 0;

    background-color: rgb(255, 85, 43);

    color: white;

}



#container-consultar{

    background: rgba(165, 162, 162, 0.308);

    height: auto;

    width: 50%;

    margin: 0% auto 0% auto;

    padding-left: 15px;

    font-family: 'Roboto', sans-serif;

    font-size: 18pt;

    border-radius: 5%;

    box-shadow: rgb(36, 36, 36) 0px 2px 20px 2px;

}





footer {

    text-align: center;

    background: rgba(0, 0, 0, 0.342);

    width: 100%;

    height: 10%;

    margin-top: 58vh;



}





<!DOCTYPE html>

<html lang="pt-br">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="home.css">

    <title>Home</title>

</head>



<body>

    <header>

        <nav>

            <p id="sistemaescolar">Sistema Escolar</p>

            <img id="user" src="../banco_de_imagens/user.png" alt="User">

            <a href="./login.html" target="_blank" style="display:none" onclick="sair()">Sair</a>

        </nav>



    </header>





    <p style="display: none;" id="btn-sair"><a href="./login.html" target="_self">Sair</a></p>



    <div class="tag-grouping" id="tag-grouping" onclick="mostrar()">

        <img src="../banco_de_imagens/mais.png" alt="img" id="img-mais">

        <p>Criar Turma</p>

    </div>

    <div class="tag-grouping" id="consultar-turma">

        <img src="../banco_de_imagens/lupa.png" alt="img" id="img-lupa">

        <p>Consultar Turma</p>

    </div>





    <div id="container-anos" style="display: none;">

        <form action="">

            <label id="txts">

                <p>Nome Sala</p>

                <label id="inputs">

                    <select name="selecionar" id="selecionar_nome">

                        <option value="1Ano">1 Ano</option>

                        <option value="2Ano">2 Ano</option>

                        <option value="3Ano">3 Ano</option>

                    </select>

                    <select name="selecionar" id="selecionar_nomeano">

                        <option value="A">A</option>

                        <option value="B">B</option>

                        <option value="C">C</option>

                        <option value="D">D</option>

                        <option value="E">E</option>

                        <option value="F">F</option>

                        <option value="G">G</option>

                        <option value="H">H</option>

                        <option value="I">I</option>

                        <option value="J">J</option>

                        <option value="K">K</option>

                        <option value="L">L</option>

                        <option value="M">M</option>

                        <option value="N">N</option>

                        <option value="O">O</option>

                        <option value="P">P</option>

                        <option value="Q">Q</option>

                        <option value="R">R</option>

                        <option value="S">S</option>

                        <option value="T">T</option>

                        <option value="U">U</option>

                        <option value="V">V</option>

                        <option value="W">W</option>

                        <option value="X">X</option>

                        <option value="Y">Y</option>

                        <option value="Z">Z</option>



                    </select>

                </label>

                <p>Alunos</p>



                <label>

                    <p id="add-alunos" onclick="adicionarAluno()">

                        <img src="../banco_de_imagens/mais.png" alt="img" style="width: 25px; border-radius: 100%; border:2px solid rgba(31, 28, 28, 0.171);">

                        Adicionar Alunos

                    </p>



                    <p id="remove-alunos" onclick="removerAlunos()">

                        <img src="../banco_de_imagens/menos.png" style="width: 25px;border-radius: 100%;border:2px solid rgba(31, 28, 28, 0.171);" alt="img">

                        Remover Aluno

                    </p>

                    

                    <div id="container-criaralunos">



                    </div>

                    

                    <div style="display: none;" id="erro">

                        <p>Dados incompletos!!</p>

                    </div>



                </label>





            </label>

            <button style="width: 20%;height: 20%; font-size: 15pt;">Criar</button>



        </form>



    </div>



    <div style="display: none;" id="container-consultar">

        <p>Sala:<p id="nomeSala"></p></p>







        



    </div> 



    <script src="home.js"></script>

    <footer>

        <address>

            <hr>

            &copy;Carlos Alessandro

        </address>

    </footer>

</body>



</html>

0 0

Quote

2. Re: Objeto nao aparece na tela

msoliver
(usa Debian)

Enviado em 06/06/2021 - 05:04h

Posta inteiro, só o javascript bugado , é complicado....

______________________________________________________________________
Importante: lynx --dump goo.gl/a9KeFc|sed -nr '/^[ ]+Se/,/dou.$/p'
Att.: Marcelo Oliver
______________________________________________________________________

0 0

Quote

3. Re: Objeto nao aparece na tela

cacabrazil
(usa Outra)

Enviado em 06/06/2021 - 11:52h

msoliver escreveu:

Posta inteiro, só o javascript bugado , é complicado....

______________________________________________________________________
Importante: lynx --dump goo.gl/a9KeFc|sed -nr '/^[ ]+Se/,/dou.$/p'
Att.: Marcelo Oliver
______________________________________________________________________

Pronto

0 0

Quote