mais duvidas recorrentes xxxxçl

Jorge Henrique Nicolau da Silva · 2026-04-07 13:02

Eu estou trabalhando num projeto de um site onde interagimos com a imagem e a frase mais não consigui fazer a interatividade da frase e nem da imagem, poderiam me dizer onde eu estou errando, para m

mais duvidas recorrentes xxxxçl

Frase de interação com você</ strong>

interaja...

<script>

</script>

h1 {
text-align: center;
color: yellow;
font: Arial;
width: none;
height: 100px;
font-style: italic;
}

strong {
color: red;
font-style: oblique;
}

div#area {
font: normal 15px Arial;
background: rgb(42, 139, 42);
color: white;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
} div#area {
font: normal 15px Arial;
background: rgb(42, 139, 42);
color: white;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}

     var a = window.document.getElementById('area')
var b = window.document.getElementById('frase')
    a.addEventListener('clickA', clicar)
    a.addEventListener('mouseenterA', entrar)
    a.addEventListener('mouseoutA', sair)

    function clicarA() {
      a.innerText = 'clicouA!'
      a.style.background = 'red'
    }

    function entrarA() {
       a.innerText = 'Entrou!'
    }
    function sairA() {
        a.innerText = 'Saiu'
        a.style.background = 'green'
    }

    b.addEventListener('clickb', )
    b.addEventListener('mouseenterb', )
    b.addEventListener('mouseoutb', )
    
    function clicarB() {
      b.innerText = 'function clicarB() {
      b.innerText = 'black'
      b.style.background = 'blue'
    }

    function entrarB() {
       b.innerText = 'yellon'
    }
    function sairB() {
        b.innerText = 'yellon'
        b.style.background = 'black'
    }'
      b.style.background = 'blue'
    }

    function entrarB() {
       a.innerText = 'yellon'
    }
    function sairB() {
        a.innerText = 'blue'
        a.style.background = 'black'
    }

Olá, Jorge! Tudo certo?

Você está tentando adicionar interatividade ao seu site usando JavaScript, mas há alguns problemas no seu código que podem estar impedindo o funcionamento correto. Vamos corrigir algumas coisas:

Eventos de Clique e Mouse: os nomes dos eventos que você está usando estão incorretos. Por exemplo, "clickA" deve ser apenas "click", "mouseenterA" deve ser "mouseenter", e assim por diante. Além disso, as funções associadas aos eventos devem ser passadas corretamente.
Funções de Evento: as funções que você definiu para os eventos não estão sendo chamadas corretamente. Certifique-se de que os nomes das funções correspondem aos nomes usados nos addEventListener.
Elementos HTML: você está tentando adicionar eventos ao h1, mas dentro dele você tem um div, o que não é uma prática comum. Considere simplificar a estrutura do HTML.

Aqui está uma versão corrigida do seu código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos DOM</title>
    <style>
        h1 {
            text-align: center;
            color: yellow;
            font-family: Arial;
            height: 100px;
            font-style: italic;
        } 

        strong {
            color: red;
            font-style: oblique;
        }

        #area {
            font: normal 15px Arial;
            background: rgb(42, 139, 42);
            color: white;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
  <h1 id="frase">
    Frase de interação <strong class="st">com você</strong>
  </h1>
  <p></p>
  <div id="area">
       interaja...
  </div>
  
  <script>
    var a = document.getElementById('area');
    var b = document.getElementById('frase');
    
    a.addEventListener('click', clicarA);
    a.addEventListener('mouseenter', entrarA);
    a.addEventListener('mouseout', sairA);

    function clicarA() {
      a.innerText = 'Clicou!';
      a.style.background = 'red';
    }

    function entrarA() {
      a.innerText = 'Entrou!';
    }

    function sairA() {
      a.innerText = 'Saiu';
      a.style.background = 'green';
    }

    b.addEventListener('click', clicarB);
    b.addEventListener('mouseenter', entrarB);
    b.addEventListener('mouseout', sairB);
    
    function clicarB() {
      b.innerText = 'Clicou na frase!';
      b.style.background = 'blue';
    }

    function entrarB() {
      b.innerText = 'Entrou na frase!';
    }

    function sairB() {
      b.innerText = 'Saiu da frase!';
      b.style.background = 'black';
    }
      </script>
</body>
</html>

Espero que essas correções ajudem a fazer seu projeto funcionar como esperado. Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Frase de interação com você</ strong>

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