JavaScript if statement within function to run another function

Question

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/

call a function to check if the hasClass('active') after setting it and if it is show graph if not hide it if($('#element').hasClass('active')){ /* show graph */ }else{ /* hide it */ } — futureweb
– futureweb, Commented Dec 9, 2015 at 21:01

I wrestled a bear once. · Accepted Answer · 2015-12-09 21:03:20Z

1

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.

answered Dec 9, 2015 at 21:03

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

axchink Over a year ago

I'm running into a problem where the first click on the button (activating) does not take an action and instead, second click (deactivating) displays the graph

Carlos Sultana · Accepted Answer · 2015-12-09 21:10:13Z

1

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');
});

answered Dec 9, 2015 at 21:10

Carlos Sultana

7295 silver badges12 bronze badges

1 Comment

axchink Over a year ago

I'm running into a problem where the first click on the button (activating) does not take an action and instead, second click (deactivating) displays the graph

goeldeepika3 · Accepted Answer · 2015-12-09 21:14:13Z

1

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();
});

answered Dec 9, 2015 at 21:14

goeldeepika3

914 bronze badges

2 Comments

axchink Over a year ago

I'm running into a problem where the first click on the button (activating) does not take display the graph and instead, second click (deactivating) displays the graph

goeldeepika3 Over a year ago

By default if it's supposed to show change the button class to 'btn active' & move toggleClass before hide & show jsfiddle.net/w5h6rffo/27

Will · Accepted Answer · 2015-12-11 03:22:55Z

0

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;
}

answered Dec 11, 2015 at 3:22

Will

4,1651 gold badge19 silver badges28 bronze badges

Collectives™ on Stack Overflow

JavaScript if statement within function to run another function

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related