Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

não consigo rodar o js dentro do html

Olá, eu já salvei o aqruivo pricipal.js dentro da pasta js e escrevi conforme descrito na video aula os código, mas mesmo assim não consigo fazer funcionar o código. meu index.html

</head>
<body>

    <header>
        <div class="container">
            <h1 class=".titulo">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" ID="primeiro-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/pricipal.js"></script>
Meu principal.js

var titulo = document.querySelector(".titulo");
    titulo.textContent = "Aparecida Nutricionista";

var paciente = document.querySelector("#primeiro-paciente");

paciente.querySelector(".info-peso");

console.log(paciente);

Poderia me dizer como arrumar? minhas pastas tambem estão organizadas como manda o curso.
4 respostas

Oi Camila!

No carregamento do script no index.html você referenciou js/pricipal.js em vez de js/principal.js.

Mude a linha do script para

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

que deve funcionar normalmente!

Espero ter ajudado! Se tiver mais alguma dúvida pode postar aqui! :)

Oi Eduardo! o js/principal.js ja está dessa forma como vc informou no script eu arrumei a escrita, mas mesmo assim mudei e não consegui rodar, aparece erro no console da mesma forma.

solução!

Oi Camila!

O <h1> com a classe título não está mudando pois na declaração da classe há um . (ponto) antes de "titulo". Mudando de<h1 class=".titulo">Aparecida Nutrição</h1> para <h1 class="titulo">Aparecida Nutrição</h1> o seu script deve corretamente mudar para "Aparecida Nutricionista".

O . é utilizado apenas no querySelector para indicar que é uma classe. Na declaração da classe no <h1> não se deve colocar o ., pois como visto neste caso, o querySelector não consegue encontrar o elemento desejado.

Como o elemento não é encontrado, sua variável titulo se torna undefined e quando tentamos acessar a propriedade textContento programa retorna um erro, pois ela não existe, e o script para de ser executado. Por esse motivo todas a linhas depois de titulo.textContent = "Aparecida Nutricionista", ou seja, as que se referem ao primeiro-paciente, também não são executadas.

Ao corrigir o nome da classe do <h1>, o script deve rodar corretamente.

Tente realizar essa mudança e me responde aqui se deu certo! Aguardo seu retorno.

Obrigada pela atenção Eduardo, eu consegui resolver aqui. Realmente tinha me confundido com o ponto. Valeuu!