How to create a clickable div?

Asked

Viewed 3,766 times

1

I have a div on my site and want to make it clickable through Javascript. How do I do that? Thanks.

javascript onclick click

  • Explain better what you need.... You want to run something by clicking on Div, or you want to leave the div marked when you click on it. Exactly what you need. Edit your question with whatever code you already have.

  • According to your tags, with a little research should be able to do what you want hehehe

  • I have a simple div only. I would like to make it clickable and perform the function I wish. Thank you.

4 answers

2

A way to "create" a clickable div would be:

#clicavel{
cursor: pointer;
}

#clicavel:hover{
color: red;
}

#clicavel:active{
color: blue;
}
<script>
function executaAcao(){
alert("Eu vou para o Google");
window.location = "http://google.com";
}
</script>
<div id="clicavel" onclick="executaAcao()">CLIQUE AQUI</div>

We use the method onclick to assign a javascript function to the html element and attributes :hover and :active to customize the style of the element according to mouse actions.

1

<div id="myDiv">
   Click me
</div>

<script>
  document.getElementById("myDiv").onclick = function() {
   alert('Clicked!');
  };
</script>

0

function res(){
  alert("Vc devia pesquisar mais")
}
div{
  cursor: pointer;
}
<div onClick="res()">
Click aqui
</div>

0

There are many ways to do this, from adding onclick in own tag how to create events:

// função
function f(){
   console.log("div clicada!");
}

// EventListener
document.querySelector("#minhadiv1").addEventListener("click", f);

// onclick
document.querySelector("#minhadiv3").onclick = f;
#minhadiv1,
#minhadiv2,
#minhadiv3{
   cursor: pointer;
}
<div id="minhadiv1">Clique-me</div>
<br />
<div id="minhadiv2" onclick="f()">Clique-me</div>
<br />
<div id="minhadiv3">Clique-me</div>

You can add style pointer with CSS to change mouse cursor (see above code).

Browser other questions tagged javascript onclick click

You are not signed in. Login or sign up in order to post.