3
respostas

Não consigo pegar duas informações de duas paginas html diferentes e trabalhar no Js

Olá estou com o seguinte problema, eu quero fazer um botão de curtir no meu site, só que eu quero fazer um painel para guardar essas informações, de curtidas. Tenho o seguinte código Js..

const $bnt = document.querySelector('[data-bcurtir]');
const $p = document.querySelector('[data-ncurtidas-bolo]');


let contador = 0;

$p.innerHTML = contador

$bnt.addEventListener('click', function () {

    contador++;

    $p.innerHTML = contador


})

Eu tenho um botão de curtir com um escutador em uma página, e tenho um uma Teg "p" que vai mostrar as quantidades de curtidas, só que uma página não reconhece a outra. Fica assim no console do navegador: em uma fica assim! ![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade ) na outra fica assim! ![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

3 respostas

Oi Mayckon, tudo certo?

Você poderia mandar o código HTML dessas duas páginas aqui também para eu entender o que está acontecendo melhor?

Fico no aguardo, abraços =)

Aqui esta o Html do botão

<section class="menu__igredietenes">
            <div class="igredietenes ">
                <div class="igredientes__box">
                    <h3 class="igredientes__texto">Curtiu nossa receita?</h3> 
                    <button class="button__curtir" data-bcurtir></button>
                    <p ></p>
                </div>
            </div>
        </section>   
    </main>
    <footer class="rodape">
        <a href="#"><img src="../img/instagram_logo-colorida.svg" class="rodape__img"></a>
        <a href="#"><img src="../img/facebook_logo.svg" class="rodape__img"></a>
        <p></p>
    </footer>
    <script src="../js/js__botao/btnMenu.js"></script>
    <script src="../js/js__curtir/curtir.js"></script>
</body>
</html>

E aqui o do painel que eu quero contabilizar as curtidas

<div class="painel">
            <div class="painel__conteudo">
                <ul class="painel__receitas">
                    <li class="painel_listas">
                        <p class="nome_receita">Massa de Pizza Caseira</p> <P class="n_visualizacao" data-visualizacao>Visualizaçâo</P> <p class="n_curtidas" data-ncurtidas>Curtidas</p>
                    </li>
                    <li class="painel_listas">
                        <p class="nome_receita">Bolo de Cenoura</p> <P class="n_visualizacao" data-visualizacao>Visualizaçâo</P> <p class="n_curtidas" data-ncurtidas-bolo></p>
                    </li>
                    <li class="painel_listas">
                        <p class="nome_receita">Pão Caseiro</p> <P class="n_visualizacao" data-visualizacao>Visualizaçâo</P> <p class="n_curtidas" data-ncurtidas>Curtidas</p>
                    </li>
                    <li class="painel_listas">
                        <p class="nome_receita">Nome da Receita</p> <P class="n_visualizacao" data-visualizacao>Visualizaçâo</P> <p class="n_curtidas" data-ncurtidas>Curtidas</p>
                    </li>
                    <li class="painel_listas">
                        <p class="nome_receita">Nome da Receita</p> <P class="n_visualizacao" data-visualizacao>Visualizaçâo</P> <p class="n_curtidas" data-ncurtidas>Curtidas</p>
                    </li>
                    <li class="painel_listas">
                        <p class="nome_receita">Nome da Receita</p> <P class="n_visualizacao" data-visualizacao>Visualizaçâo</P> <p class="n_curtidas" data-ncurtidas>Curtidas</p>
                    </li>
                </ul>
            </div>
        </div>



    </main>
    <footer class="rodape">
        <a href="#"><img src="img/instagram_logo-colorida.svg" class="rodape__img"></a>
        <a href="#"><img src="img/facebook_logo.svg" class="rodape__img"></a>
        <p></p>
    </footer>
    <script src="js/js__botao/btnMenu.js"></script>
    <script src="js/js__curtir/curtir.js"></script>
</body>

</html>

Oi Mayckon, tudo certo?

Isso acontece porque você tem dois arquivos HTML, porém, o arquivo que contém o botão não enxerga as informações contidas no arquivo do painel, e vice-versa.

Isso faz com que dê erro nas duas páginas, pois o botão não existe em uma delas (no painel), enquanto o o parágrafo não existe no arquivo de botão.

Uma solução é deixar todo o código numa mesma página HTML, ou tentar adicionar esses elementos de forma dinâmica.

Espero ter ajudado, bons estudos =)