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