CODEWITHSUNDEEP
javascripthtml
zacsloth
zacsloth

Reputation: 31

Run JS by clicking a div element

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>

Upvotes: 1

Views: 2077

Answers (3)

David
David

Reputation: 7285

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!

Upvotes: 0

vitkuzmenko
vitkuzmenko

Reputation: 84

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>

Upvotes: 2

Buddhi741
Buddhi741

Reputation: 375

use jQuery 

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

Upvotes: 2

Related Questions