2 scripts no mesmo html | Programação | Alura

4
respostas

por Marcelo Piola Peres

| 44.9k xp | 25 posts

Estou com um problema meio bobo, mas como sou iniciante estou apanhando muito para resolver, alguém poderia dar uma luz por favor?

preciso fazer esses 2 scripts funcionarem no meu html

<script src="./assets/js/info.js"></script>
<script src="./assets/js/menu.js"></script>

Ambos scripts estão funcionando perfeitamente, por isso não vou prolongar colocando eles aqui.

Dúvidas: 1 - quando coloco essa chamada no html dos 2 scripts, apenas o de baixo executa todas as ações, ficando o de cima prejudicado (executando apenas algumas ações), ao alterar a ordem o de baixo funciona e o de cima não, como posso fazer os dois funcionarem no mesmo html??

2 - Minhas chamadas de script no html não funcionam quando coloco no head, apenas quando inseridos após o /main ao final da página, por que isso ocorre?? Queria colocar no head para um código mais organizado.

Agradeço muito a atenção.

4 respostas

por Carlos Pereira Dias

| 527k xp | 54 posts

02/01/2020

Envie os códigos, tanto do Javascript quanto o HTML da página hospedeira.

por Marcelo Piola Peres

| 44.9k xp | 25 posts

07/01/2020

Só para esclarecer, os dois scripts estão funcionando perfeitamente, porém ao fazer a chamada no html

<script src="./assets/js/menu.js"></script>
<script src="./assets/js/info.js"></script>

O de baixo (info.js) funciona 100% e o de cima (menu.js) funciona uns 90% (ele não faz apenas a função de fechar a div).

De modo que se eu inverto a posição dos dois, desta forma abaixo:

<script src="./assets/js/info.js"></script>
<script src="./assets/js/menu.js"></script>

O de baixo agora (menu.js) funciona 100% e o de cima (info.js) funciona uns 90% (não fazendo a função de fechar a div).

Conclusão: a ordem que coloco no html atrapalha a execução, o que poderia ser?

Seguem os códigos de ambos:

menu.js

document.querySelector('.menu-abrir').onclick = function() {
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick = function() {
    document.documentElement.classList.remove('menu-ativo');
};

document.documentElement.onclick = function(event) {
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove('menu-ativo');
    }
};

info.js

document.querySelector('.info-open').onclick = function() {
    document.documentElement.classList.add('info-active');
};

document.querySelector('.info-close').onclick = function() {
    document.documentElement.classList.remove('info-active');
};

document.documentElement.onclick = function(event) {
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove('info-active');
    }
};

por Marcelo Piola Peres

| 44.9k xp | 25 posts

07/01/2020

html da página hospedeira

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/promote.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="top-container">
            <div class="top-back">
                <a href="#"><img class="set_back" src="./assets/imgs/arrow.svg"></a>
            </div>
            <div class="top-menu">
                <button class="menu-abrir"><img src="./assets/imgs/more.svg"></button>
                <nav class="menubar">
                    <button class="menu-fechar"></button>
                    <ul id="sup-menubar">
                        <li><a href="#">item do menu.js </a></li>
                        <li><a href="#">item do menu.js</a></li>
                    </ul>
                </nav>
            </div>
        </div>        
    </header>
    <main>
        <div class="container-title">
            <div id="title">Promoções</div>
        </div>
        <div class="container-promotes">
            <div class="container-subtitles">
                <div id="status">Status</div>
                <button class="info-open"><img src="./assets/imgs/about.svg"></button>
            <nav class="info">
                <button class="info-close"></button>
                <ul class="info-txt">
                    <div class="box-details">
                    <div id="status-analyze"></div>
                    <div id="txt-analyze">TEXTO QUE APARECE PELO INFO.JS</div></div>
                </ul>            
            </nav>
                <div id="name-promote">Promoção</div>
                <div id="type">Tipo</div>
                <div id="activity">Atividade</div>
            </div>
        </div>
    </main>


//repare que os scripts estão abaixo do /main e não no head, pois quando coloco lá não funciona, apenas quando insiro aqui, é a pergunta nº 2 que fiz no tópico, não compreendi por que não funciona no head.

//Tente inverter a ordem dos dois abaixo para ver o que estou dizendo na pergunta nº 1, o de cima nunca funciona 100% (fechar quando clica na área escura)

        <script src="./assets/js/menu.js"></script>
        <script src="./assets/js/info.js"></script>
</body>
</html>

por Jonilson Sousa

| 1552.4k xp | 2890 posts

Instrutor Software Developer at Alura Group

07/01/2020

Olá Marcelo, tudo bem?

A ordem que colocamos os arquivos ".js" influencia na ordem de execução dos arquivos, então sim podem atrapalhar, se ambos os arquivos estão em conflito com alguma ação, pode ser que o comportamento de um seja contrário ao comportamento do outro. Então você pode tentar colocar todo esse conteúdo dos arquivos javascript em um único arquivo, e verificar o comportamento de ambos, se está funcionando corretamente, se sim então a chamada dos arquivos está atrapalhando em alguma coisa. Outra coisa que precisamos observar é que essas funções para capturar o clique do mouse estão muito parecidas:

document.documentElement.onclick = function(event) {
    if (event.target === document.documentElement) {
    // apenas o conteúdo interno if é diferente
    }
};

Pode ser que esse comando esteja interferindo no outro arquivo, esse pode ser o problema, note que o IF é exatamente o mesmo, então na lógica, ele vai acessar o IF do primeiro arquivo e se a condição for satisfatória ele sempre vai executar as ações do primeiro arquivo.