CODEWITHSUNDEEP
javascripthtmlcss
Ra Ha
Ra Ha

Reputation: 83

How to clicked button id and make change on div which has the same id?

I am using https://github.com/daneden/animate.css this css class to animate the boxes in grid.If a user clicks on "Fahrenheit to Celsius conversion" then the box with fahtocel id moves.Same for second box , It works well what I have written but Itmakes no sense to write javascript function for each box, Is there a way to get id of clicked div and relate it with the box which has to move in one function.

function bounce() {
  $("#fahtocel").addClass("animated bounce");

  setTimeout(function() {
    $("#fahtocel").removeClass("animated");
    $("#fahtocel").removeClass("bounce");
  }, 1000);

  setTimeout(genQuote(), 5000);
}

function bounce2() {
  $("#box2").addClass("animated bounce");

  setTimeout(function() {
    $("#box2").removeClass("animated");
    $("#box2").removeClass("bounce");
  }, 1000);

  setTimeout(genQuote(), 5000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div style="cursor: pointer;" onclick="bounce()">Fahrenheit to Celsius conversion</div>
  </li>
  <li>
    <div style="cursor: pointer;" onclick="bounce2()">Box 2</div>
  </li>
  <li>Lorem 3</li>
</ul>

<div class="row">
  <div class="col-md-4 box" id="fahtocel">
    <div class="inner"> </div>
  </div>

  <div class="col-md-4 box" id="box2">
    <div class="inner"></div>
  </div>

Upvotes: 0

Views: 201

Answers (2)

Adder
Adder

Reputation: 5868

You can make this function, and call it twice when needed:

function bounceBox($box){

   $box.addClass("animated bounce");

   setTimeout(function(){
      $box.removeClass("animated");
      $box.removeClass("bounce");
   }, 1000);
   setTimeout(genQuote, 5000);
}

bounceBox($('#fahtocel'));
bounceBox($('#box2'));

There is probably more that can be done, but you didn't show the code for it.

Upvotes: 2

Doug
Doug

Reputation: 1515

You can pass the ID (as a string/text) for the DIVs you want to change as a parameter to the function.

HTML

onclick="bounce('fahtocel')"

JavaScript

function bounce( elementID ){ ... }

jQuery

$('#' + elementID)

As an aside, I also turned your first DIVs into buttons -- not something that you have to do, its just nice to use buttons for things that need to be clicked instead of shoe-horning that functionality into a DIV.

function bounce( elementID ) {
  var target = $('#' + elementID );
  target.addClass("animated bounce");

  setTimeout(function() {
    target.removeClass("animated");
    target.removeClass("bounce");
  }, 1000);

  setTimeout(function(){
    genQuote( elementID );
  }, 5000);
}

function genQuote( elementID ){
  // you can pass the string for the ID to another
  // function. it's just like a variable, but you
  // need to make sure your function will send and
  // receive them as nessecary.
  $('#' + elementID ).html( new Date() );
  // this is just randomly putting in the current date
  // and time to show an update.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button onclick="bounce('fahtocel')">Fahrenheit to Celsius conversion</button>
  </li>
  <li>
    <button onclick="bounce('box2')">Box 2</button>
  </li>
  <li>Lorem 3</li>
</ul>

<div class="row">
  <div class="col-md-4 box" id="fahtocel">
    <div class="inner"> </div>
  </div>

  <div class="col-md-4 box" id="box2">
    <div class="inner"></div>
  </div>

Upvotes: 0

Related Questions