Run JS by clicking a div element

Question

Im working on a website that has a few different colored boxes made with divs, and I want to use them to open certain things. Whether it be music, photos, etc. Im using JS to generate a random number and use the number to choose which song to open, but I have no clue how to attach it to the div itself.

</head>
<body style="background-color:#FFF;">
<div id="center">
<div id="header">
<div id="title"><h1>welcom3 :-)</h1></div>
    <div id="wrapper">
    <div id="redbox">
    </div>
    <div id="6box">
    </div>
    <div id="bluebox">
    </div>
    <div id="greenbox">
    </div>
    <div id="yellowbox">
    </div>
    <div id="yellowboxmargin">
    </div>
    <div id="yellowboxmargin">
    </div>
    <div id="yellowboxmargin">
    </div>
</div>
</div>
</body>
</html>

onclick="call_the_function_of_your_choice" and do your stuff ... — Ravish, Aug 22 '15 at 07:17
@SomeOne Please don't recommend anyone from using `onclick`... They are [bad, bad, bad coding practice](http://stackoverflow.com/q/5871640/283863). — Derek 朕會功夫, Aug 22 '15 at 07:23
yeap, agree that they are bad, but, I was just trying to suggest that you could do something with click event. my bad. — Ravish, Aug 22 '15 at 07:26
In case you have checked my answer and thought that the snippet was not working, I just forgot to link the jQuery library. You can check it now. — David, Aug 24 '15 at 23:42

score 2 · Answer 1 · answered Aug 22 '15 at 07:56

2

use jQuery

 <div id="box1"></div>
 <script> 
   $(document).ready(function() {
     $("#box1").click(function(){
      yourfunc();
     }
   })
 </script>

answered Aug 22 '15 at 07:56

Buddhi741

375
3
15

Does it matter where I would place this in the HTML? – zacsloth Aug 22 '15 at 08:03
no . as the document `.ready` function makes it function after the Dom is loaded. the html will go on the body . and you can put the js on the head or any where you want. add more `.click` functions in to the `.ready` event function if you want. this method is really helpfull if you are using cordova / phonegap – Buddhi741 Aug 23 '15 at 11:12

score 2 · Answer 2 · answered Aug 22 '15 at 08:17

2

If you need run js code without jquery, use this example.

In head:

<script>
function hello() { 
    // do something
}
</script>

In body:

<div onclick="hello()">Hello</div>

answered Aug 22 '15 at 08:17

vitkuzmenko

84
8

David · Answer 3 · 2015-08-24T23:34:16.047

I would follow the advice of Buddhi Abeyratne and use jQuery. Of course, this is just a guess, but I would say that due to the nature of your project, it will make things easier for you.

jQuery has different methods to attach events to an alement. In this case, you can use the shortcut ".click()".

I leave you here a snippet:

function do_something_cool(box)
{
    alert("I have code to make something awesome with " + box.attr("id"));
}

$(document).ready(function()
{
    $("#wrapper div").click(function() { do_something_cool($(this)); });
});

body 
{
  background-color: #FFF;
}

.colored_box 
{
  height: 50px;
  width: 50px;
  margin: 5px;
}

#redbox
{
  background-color: red;
}

#bluebox
{
  background-color: blue;
}

#greenbox
{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="center">
    <div id="header">
      <div id="title"><h1>welcom3 :-)</h1></div>
      <div id="wrapper">
        <div id="redbox" class="colored_box"></div>
        <div id="bluebox" class="colored_box"></div>
        <div id="greenbox" class="colored_box"></div>
      </div>
    </div>
  </div>
</body>

But if you decide to don't use jQuery, here you have the vanilla javascript:

window.onload = function()
{
  var boxes = document.getElementById("wrapper").getElementsByTagName("div");
  for (var i = 0; i < boxes.length; i++)
  {
    boxes[i].addEventListener("click", do_something_cool);
  } 
}

function do_something_cool(evt)
{
  alert("I have code to make something awesome with " + evt.target.id);
}

Btw, I guess it is just a copy/paste thing, but you forgot to close one div.

Also, pay attention to how I have separated html, js and css in the snippet. You should avoid inline js and css.

Good luck!

Run JS by clicking a div element

3 Answers3