Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

14
respostas

queryselector não funciona!

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Introdução e atividade Query Selector

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

bom eu coloco o queryselector mais ele ele não imprime no navegador e da essa mensagem de erro aqui: "Uncaught TypeError: document.querysector is not a function at troca-de-turno.html:40"! html:

insira seu código aqui<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h1>Aparecida Nutrição</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" >
                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente">
                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" >
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>

            </section>
        </main>
        <script> console.log(document.querysector(".paciente"));</script>

    </body>
</html>
14 respostas
por Geovane Ferreira Santana
| 204.9k xp | 669 posts

css:

insira seu código aqui*{
    box-sizing: border-box;
 }

body{
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

header{
    background-color: #333;
    height: 3em;
    color: #FFF;
    margin-bottom: 1em;
}

header h1{
    font-size: 2em;
    display:inline-block;
    vertical-align:    middle;
}
header h2{
    font-size: 2em;
    display:inline-block;
    vertical-align:    middle;
}

header .container:before{
    content: '';
    display:inline-block;
    height: 100%;
    vertical-align:    middle;
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

section{
    margin: 2em 0;
    overflow: hidden;
}

section h2{
    font-size: 3em;
    display: block;
    padding-bottom: .5em;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5em;
}

table{
    width: 100%;
    margin-bottom : .5em;
    table-layout: fixed;

}

td, th {
    padding: .7em;
    margin: 0;
    border: 1px solid #ccc;
    text-align: center;
}

th{
    font-weight: bold;
    background-color: #EEE;
}

label{
    color: #555;
    display: block;
    margin-bottom: .2em;
}

.campo{
    margin: 0;
    padding-bottom: 1em;
    width: 100%;
    border: 1px solid #ccc;
    padding: .7em;
    width: 100%;
}

.campo-medio{
    display: inline-block;
    padding-right: .5em;
}

.grupo{
    width: 32%;
    display: inline-block;
    padding: 10px 0px;
}

button{
    padding: .5em 2em;
    border: 0;
    border-bottom: 3px solid;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: -3px;
    color: #fff;
    background-color:#0c8cd3;
    border-color: #04324c;
    width: 20%;
    display: block;
    clear: both;
    margin: 10px 0px;

}

button:active{
    margin-top:0px;
    border: 0;
}

button[disabled=disabled], button:disabled {
    background-color: gray;
    border-color: darkgray;

}

.adicionar-paciente{
    margin-top: 30px;
}

.campo-invalido{
    border: 1px solid red;
}
por Geovani Granieri
| 909.2k xp | 1038 posts

Opa Geovane,

Você cometeu um pequeno erro de digitação:

Vocẽ digitou:

console.log(document.querysector(".paciente"));</script>

Quando na verdade é document.querySelector(".paciente") e por isso havia dado o erro :)

Abraços!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

https://drive.google.com/file/d/1Wk3Ts_EQCNTHkbZLhdStNbrxVfjVsuNA/view?usp=sharing

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

eu fiz o que vc disse mesmo assim não deu!

por Geovani Granieri
| 909.2k xp | 1038 posts

Olá Geovane,

No projeto que você mandou ainda está com os erros de digitação, precisamos digitar da seguinte maneira:

<script>
    console.log(document.querySelector("th"));
    console.log(document.querySelector(".paciente"));
</script>

E ai você substitui o th pelo que você deseja selecionar :)

  • Para classes temos que adicionar o .antes, por isso coloquei ".paciente"
  • Para id temos que adicionar o # antes
  • Para os elementos html basta escrever igual fizemos :)

O javascript leva em consideração se está com letra maiúscula e minuscula também, então sempre tome esse cuidado :)

E certifique se você está tentando pegar um elemento que exista na sua pagina :)

Abraços e Bons Estudos!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

https://drive.google.com/file/d/1i20gWek6ibYylfXls6gREBhp78D6hmRE/view?usp=sharing

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

nem assim está dando ó! html:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h1>Aparecida Nutrição</h1>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" >
                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente">
                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" >
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>

            </section>
        </main>
        <script src="js/principal.js"></script>

    </body>
</html>
por Geovane Ferreira Santana
| 204.9k xp | 669 posts

js/principal.js

console.log("alert");
por Geovani Granieri
| 909.2k xp | 1038 posts

Olá Geovane,

  • Você ainda esta escrevendo de uma maneira incorreta:

https://drive.google.com/file/d/1i20gWek6ibYylfXls6gREBhp78D6hmRE/view?usp=sharing

Veja que é Selector você esta digitando sector, digite calmamente se atentando as letras maiúsculas e minusculas para no haver erro de digitação :)

Por isso está aparecendo em vermelho como estivesse errado!

  • Em relação a sua segunda questão

Como está separado suas pastas?

Se você tem uma única pasta chamada js onde está todo o conteúdo, inclusive a página html, você precisa mudar para:

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

Agora se você tem uma pasta separada chamada js e os arquivos html não está nela então provavelmente deve estar funcionando corretamente e para checar isso você deve apertar F12 no navegador com a sua pagina html aberta para aparecer o console e lá deve aparecer uma mensagem escrita

Abraços!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

bom estava errado mesmo mais eu mudei e mesmo assim não deu!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

https://drive.google.com/file/d/1-ksG-00jxw5rQpqQT6V1H9xtXNbKw2L9/view?usp=sharing

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

eu realmente não sei o que esta acontecendo!

por Geovani Granieri
| 909.2k xp | 1038 posts

Olá Geovane,

Faça upload novamente no drive do seu arquivo para eu saber como você está organizando as pastas do seu código, veja como eu disse:

Se vocês tiver seus arquivos da seguinte maneira:

  • index.html
  • js
    • principal.js

Ai deveria estar funcionando corretamente e você precisa apenas olhar o console do navegador

Se estiver da seguinte maneira ( sem nenhuma pasta separando os arquivos):

  • index.html
  • princpal.js

Você deveria mudar para <script src="principal.js"> </script>

Abraços!

por Geovane Ferreira Santana
| 204.9k xp | 669 posts

obrigado deu certo Geovani, aqui só mais uma pergunta pra programar em js precisa baixar um código fonte especial para js?

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA