CODEWITHSUNDEEP
javascriptjqueryhtmlcss
axchink
axchink

Reputation: 179

JavaScript if statement within function to run another function

I am trying to attach a function into an existing button. The button is currently using the jQuery toggle function as of now. What I want to do is the following: When the button is active (user clicks on the button once), show the graph and when the button is inactive (user clicks on the button again), the graph should disappear.

The code I have written is the following (js fiddle is here http://jsfiddle.net/w5h6rffo/7/

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<button type="button" class="btn" onclick="graphX();">Details</button>
<div id="container" style="height: 400px; min-width: 310px"></div>

CSS 

 .btn.active, .btn:active {
        background: #000000;
        text-decoration: none;
    }

JavaScript / jQuery

$('.btn').click(function() {
    $(this).toggleClass('active');
});

$(function graphX() {
  var data = [];
  for(var i = 0; i < 899; i++) {
    data[i] = {X: i};
  }

  var processedData = [];
  Highcharts.each(data, function (d) {
    processedData.push(Math.sin(d.X));
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    rangeSelector: {
      selected: 1
    },

    series: [{
      data: processedData,
      pointStart: Date.UTC(2010, 1, 1),
    }],

  });
});

How can I implement the if statement within the jQuery button toggle function so that the graphX is initiated and displayed when the button is active and the graphX to disappear when the button is inactive?

I've been trying to write it in this way

$('.btn').click(function() {
    if (.btn.active = false){
    container.visibility = visible;
    $(this).toggleClass('active');
    } else {
    container.visibility = hidden;
});

Here is the jsfiddle http://jsfiddle.net/w5h6rffo/7/

Upvotes: 0

Views: 227

Answers (4)

Will
Will

Reputation: 4155

Another option: start with the container hidden. When the button is clicked, toggle a class on it to show it.

$('.btn').click(function() {
    $(this).toggleClass('active');
    $('#container').toggleClass('active');
});

#container {
  display: none;
}
#container.active {
  display: block;
}

Upvotes: 0

goeldeepika3
goeldeepika3

Reputation: 91

The graph method is any anonymous scope & hence, cannot be called to reload. If you do not wish to reload, only hide & show then you can use jQuery hide/show.

For reload of GraphX:

Wrap the entire graphX + click method in $(document).ready function, this will allow to associate reload of graphX based 'active' without making it public. Please see below:

http://jsfiddle.net/w5h6rffo/21/

$(document).ready(function() {
$('.btn').click(function() {
if ($(this).hasClass('active')) {

  $('#container').show();
  graphX();
} else {
  $('#container').hide();
}
$(this).toggleClass('active');

});

var graphX = function graphX() {
console.log('reload graphX')
var data = [];
for (var i = 0; i < 899; i++) {
  data[i] = {
    X: i
  };
}

var processedData = [];
Highcharts.each(data, function(d) {
  processedData.push(Math.sin(d.X));
});

// Create the chart
$('#container').highcharts('StockChart', {
  rangeSelector: {
    selected: 1
  },

  series: [{
    data: processedData,
    pointStart: Date.UTC(2010, 1, 1),
  }],

});
};
  graphX();
});

Upvotes: 1

Carlos Sultana
Carlos Sultana

Reputation: 709

Check if it has the class, toggle its visibility based on the result and then finally toggle the class.

$('.btn').click(function() {
    var active = $(this).hasClass('active');
    $('#container').toggle(active);
    $(this).toggleClass('active');
});

Upvotes: 1

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

You could do something like this:

$('.btn').click(function() {
    $(this).toggleClass('active');
    if($(this).hasClass('active')){
        $("#container").hide();
    }else{
        $("#container").show();
    }
});

here's a fiddle.

Upvotes: 1

Related Questions