O botão cria uma div, daí eu quero passar o mouse em cima da div criada e quero q um alert seja exibido. Como eu posso fazer isso?
O botão cria uma div, daí eu quero passar o mouse em cima da div criada e quero q um alert seja exibido. Como eu posso fazer isso?
Fala ai Yuri, tudo bem? Precisa ver como você está fazendo para criar essa div
, poderia fazer algo assim:
const div = document.createElement('div')
div.addEventListener('mouseenter', () => {})
Espero ter ajudado.
O meu código tá assim:
<button onclick="criaQuadrado()">Criar</button>
<script>
function criaQuadrado() {
var qd = document.body;
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = "#F00";
qd.appendChild(div);
}
</script>
Daí eu tô criando a div. O que eu quero é:
Ao passar o mouse sobre essa div, ele deve exibir um alert. Sacou?
Minha dificuldade é pq o elemento vai ser criado, não vem carregado já.
Entendi, então o código seria o que eu te passei mesmo, faz um addEventListener
da div
:
<button onclick="criaQuadrado()">Criar</button>
<script>
function criaQuadrado() {
var qd = document.body;
var div = document.createElement('div');
div.addEventListener('mousenter', function() {
alert('Passei o mouse')
})
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = "#F00";
qd.appendChild(div);
}
</script>
Espero ter ajudado.
Mano, funcionou direitinho! Muito obrigado.
Você poderia me explicar o pq esse evento: div.addEventListener('mousenter', function() { alert('Passei o mouse') })
não funciona fora do scopo da function criaQuadrado?
Boa Yuri, fico feliz que tenha dado certo.
Sobre a duvida:
Você poderia me explicar o pq esse evento: div.addEventListener('mousenter', function() { alert('Passei o mouse') }) não funciona fora do scopo da function criaQuadrado?
A questão é que a variável div
foi declarada dentro da função criaQuadrado
, então, o listener para ela deveria ser adicionado dentro desse contexto.
Caso você esteja tentando adicionar um listener fora da função, pode acontecer do addEventListener
não ter encontrado sua div
porque ela pode ter sido criada depois da vinculação do evento, algo assim:
<script>
// nesse momento a nova div ainda nao existe no dom
div.addEventListener('mousenter', function() {
alert('Passei o mouse')
})
function criaQuadrado() {
var qd = document.body;
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = "#F00";
qd.appendChild(div);
}
</script>
Fez sentido?
Espero ter ajudado.
entendi sim! Faz todo sentido. Muito obrigado, irmão! Abração
Magina Yuri, sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.