Why I can't run this code in JsFiddle?Do I need to change html code?

Question

I'm not able to run this code in jsfiddle.I can't figure out where is the problem.Do I need to change the html part.If then what is it?Can anyone help me on thisI'm really stuck here.I can't understand what is the problem.

    jQuery(document).ready(function($) {



      //second chart
      var secondLeg1 = [],
        secondLeg2 = [],
        secondSpread = [],
        secondProfit = [];


      var secondChart = null,
        secondChartOptions = {

          chart: {
            renderTo: 'secondChartContainer',
            height: 600
          },
          rangeSelector: {
            selected: 1
          },

          title: {
            text: 'Natural Gas'
          },

          yAxis: [{
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'NG - Long'
            },
            height: '20%',
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'NG - Short'
            },
            top: '25%',
            height: '20%',
            offset: 0,
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'Spread'
            },
            top: '50%',
            height: '20%',
            offset: 0,
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'Profit/Loss'
            },
            top: '75%',
            height: '25%',
            offset: 0,
            lineWidth: 2
          }],

          tooltip: {
            split: true
          },
          plotOptions: {
            column: {
              zones: [{
                value: 0,
                color: 'red'
              }, {
                color: 'green'
              }]
            }
          },
          series: [{
            name: 'Natural Gas March 2017 Contract - Long',
            data: secondLeg1
          }, {
            name: 'Natural Gas April 2017 Contract - Short',
            data: secondLeg2,
            yAxis: 1
          }, {
            name: 'Spread (Long minus Short)',
            data: secondSpread,
            yAxis: 2
          }, {
            type: 'column',
            name: 'Profit/Loss in US Dollars',
            data: secondProfit,
            yAxis: 3
          }],

          exporting: {
            buttons: {
              reverseButton: {
                text: 'Reverse',
                onclick: function() {
                  var reversed = this.yAxis[0].reversed;
                  this.yAxis[0].update({
                    reversed: !reversed
                  });

                  reversed = this.yAxis[1].reversed;
                  this.yAxis[1].update({
                    reversed: !reversed
                  });

                  reversed = this.yAxis[2].reversed;
                  this.yAxis[2].update({
                    reversed: !reversed
                  });

                  reversed = this.yAxis[3].reversed;
                  this.yAxis[3].update({
                    reversed: !reversed
                  });

                  this.redraw();
                },
                align: 'left',
                x: 350,
                y: 35
              },

              yearDownButton: {
                text: 'Year Down',
                onclick: function() {
                  var xExtreme = this.xAxis[0].getExtremes();
                  // console.log(xExtreme.min);
                  this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
                },
                align: 'left',
                x: 450,
                y: 35
              },

              yearUpButton: {
                text: 'Year Up',
                onclick: function() {
                  var xExtreme = this.xAxis[0].getExtremes();
                  // console.log(xExtreme.min);
                  this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
                },
                align: 'left',
                x: 550,
                y: 35
              }
            }
          }
        };

      function drawSecondChart() {
        secondChart = new Highcharts.StockChart(secondChartOptions);
      }


      $.ajax({

        url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20100301000000%22%2C%22end%3D20170228000000%22%2C%22daily%22%2C%22false%22%5D%5D&method=get",
        complete: function(data) {
          var jsonChartData = JSON.parse(data['responseText']);
          var secondChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20100301000000']['end=20170228000000']['daily']['false']['value']['message'];
          secondChartData = JSON.parse(secondChartData);
          var secondChartDataLength = secondChartData.length;




          for (var i = 0; i < secondChartDataLength; i++) {
            secondLeg1.push([
              secondChartData[i]['timestamp'],
              secondChartData[i]['leg1']
            ]);

            secondLeg2.push([
              secondChartData[i]['timestamp'],
              secondChartData[i]['leg2']
            ]);

            secondSpread.push([
              secondChartData[i]['timestamp'],
              secondChartData[i]['spread']
            ]);

            secondProfit.push([
              secondChartData[i]['timestamp'],
              secondChartData[i]['profit']
            ]);
          }

          drawSecondChart();

          $('#resetButton').on("click", function(e) {
            e.preventDefault();
            $("#secondChartContainer").empty();

            secondChartOptions.series = [];
            secondChartOptions.series.push({
              name: 'Natural Gas March 2017 Contract - Long',
              data: secondLeg1
            });
            secondChartOptions.series.push({
              name: 'Natural Gas April 2017 Contract - Short',
              data: secondLeg2,
              yAxis: 1
            });
            secondChartOptions.series.push({
              name: 'Spread (Long minus Short)',
              data: secondSpread,
              yAxis: 2
            });


            secondChartOptions.series.push({
              type: 'column',
              name: 'Profit/Loss in US Dollars',
              data: secondProfit,
              yAxis: 3
            });
            secondChart = new Highcharts.StockChart(secondChartOptions);
          });
        }
      });






      //third chart
      var thirdLeg1 = [],
        thirdLeg2 = [],
        thirdSpread = [],
        thirdProfit = [];



      var thirdChart = null,
        thirdChartOptions = {

          chart: {
            renderTo: 'thirdChartContainer',
            height: 600
          },
          rangeSelector: {
            selected: 1
          },

          title: {
            text: 'Natural Gas'
          },

          yAxis: [{
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'NG - Long'
            },
            height: '20%',
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'NG - Short'
            },
            top: '25%',
            height: '20%',
            offset: 0,
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'Spread'
            },
            top: '50%',
            height: '20%',
            offset: 0,
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: 'Profit/Loss'
            },
            top: '75%',
            height: '25%',
            offset: 0,
            lineWidth: 2
          }],

          tooltip: {
            split: true
          },
          plotOptions: {
            column: {
              zones: [{
                value: 0,
                color: 'red'
              }, {
                color: 'green'
              }]
            }
          },
          series: [{
            name: 'Natural Gas March 2017 Contract - Long',
            data: thirdLeg1
          }, {
            name: 'Natural Gas April 2017 Contract - Short',
            data: thirdLeg2,
            yAxis: 1
          }, {
            name: 'Spread (Long minus Short)',
            data: thirdSpread,
            yAxis: 2
          }, {
            type: 'column',
            name: 'Profit/Loss in US Dollars',
            data: thirdProfit,
            yAxis: 3
          }],

          exporting: {
            buttons: {
              reverseButton: {
                text: 'Reverse',
                onclick: function() {
                  var reversed = this.yAxis[0].reversed;
                  this.yAxis[0].update({
                    reversed: !reversed
                  });

                  reversed = this.yAxis[1].reversed;
                  this.yAxis[1].update({
                    reversed: !reversed
                  });

                  reversed = this.yAxis[2].reversed;
                  this.yAxis[2].update({
                    reversed: !reversed
                  });

                  reversed = this.yAxis[3].reversed;
                  this.yAxis[3].update({
                    reversed: !reversed
                  });

                  this.redraw();
                },
                align: 'left',
                x: 350,
                y: 35
              },

              yearDownButton: {
                text: 'Year Down',
                onclick: function() {
                  var xExtreme = this.xAxis[0].getExtremes();
                  // console.log(xExtreme.min);
                  this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
                },
                align: 'left',
                x: 450,
                y: 35
              },

              yearUpButton: {
                text: 'Year Up',
                onclick: function() {
                  var xExtreme = this.xAxis[0].getExtremes();
                  // console.log(xExtreme.min);
                  this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
                },
                align: 'left',
                x: 550,
                y: 35
              }
            }
          }
        };

      function drawThirdChart() {
        thirdChart = new Highcharts.StockChart(thirdChartOptions);
      }


      $.ajax({

        url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20161212000000%22%2C%22end%3D20161212235900%22%2C%22minutes%22%2C%22false%22%5D%5D&method=get",
        complete: function(data) {
          var jsonChartData = JSON.parse(data['responseText']);
          var thirdChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20161212000000']['end=20161212235900']['minutes']['false']['value']['message'];
          thirdChartData = JSON.parse(thirdChartData);
          var thirdChartDataLength = thirdChartData.length;




          for (var i = 0; i < thirdChartDataLength; i++) {
            thirdLeg1.push([
              thirdChartData[i]['timestamp'],
              thirdChartData[i]['leg1']
            ]);

            thirdLeg2.push([
              thirdChartData[i]['timestamp'],
              thirdChartData[i]['leg2']
            ]);

            thirdSpread.push([
              thirdChartData[i]['timestamp'],
              thirdChartData[i]['spread']
            ]);

            thirdProfit.push([
              thirdChartData[i]['timestamp'],
              thirdChartData[i]['profit']
            ]);
          }

          drawThirdChart();

          $('#resetButton').on("click", function(e) {
            e.preventDefault();
            $("#thirdChartContainer").empty();

            thirdChartOptions.series = [];
            thirdChartOptions.series.push({
              name: 'Natural Gas March 2017 Contract - Long',
              data: thirdLeg1
            });
            thirdChartOptions.series.push({
              name: 'Natural Gas April 2017 Contract - Short',
              data: thirdLeg2,
              yAxis: 1
            });
            thirdChartOptions.series.push({
              name: 'Spread (Long minus Short)',
              data: thirdSpread,
              yAxis: 2
            });


            thirdChartOptions.series.push({
              type: 'column',
              name: 'Profit/Loss in US Dollars',
              data: thirdProfit,
              yAxis: 3
            });
            thirdChart = new Highcharts.StockChart(thirdChartOptions);
          });
        }
      });






    });

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.src.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>

    <div id="thirdChartContainer" style="height: 600px; margin-top: 1em"></div>

Check your console. I guess because you are trying to load a script from insecure source (http, not https). So whatever is your issue, does it fix it: `` ? — A. Wolff, Feb 15 '17 at 16:01
Different failure, but the same medicine: http://stackoverflow.com/q/14499783/ — Teemu, Feb 15 '17 at 16:02
Possible duplicate of [jsFiddle: no connection between html and js? Can't call simple function from button?](http://stackoverflow.com/questions/14499783/jsfiddle-no-connection-between-html-and-js-cant-call-simple-function-from-but) — Tha'er AlAjlouni ثائر العجلوني, Feb 15 '17 at 16:07

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Since it looks like you're only using the stock charts, you shouldn't be loading http://code.highcharts.com/highcharts.src.js (since it sets the HighCharts object). From the documentation:

Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. The highmaps.js file is also included, but unlike highstock.js, this doesn't include the complete Highcharts feature set. Highstock and Highmaps can be loaded separate files like this:
<script src="/js/highstock.js"></script>
<script src="/js/highmaps.js"></script>
But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules:

Taking it out makes your code load the graphs.

jQuery(document).ready(function($) {
  //second chart
  var secondLeg1 = [],
    secondLeg2 = [],
    secondSpread = [],
    secondProfit = [];


  var secondChart = null,
    secondChartOptions = {

      chart: {
        renderTo: 'secondChartContainer',
        height: 600
      },
      rangeSelector: {
        selected: 1
      },

      title: {
        text: 'Natural Gas'
      },

      yAxis: [{
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'NG - Long'
        },
        height: '20%',
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'NG - Short'
        },
        top: '25%',
        height: '20%',
        offset: 0,
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'Spread'
        },
        top: '50%',
        height: '20%',
        offset: 0,
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'Profit/Loss'
        },
        top: '75%',
        height: '25%',
        offset: 0,
        lineWidth: 2
      }],

      tooltip: {
        split: true
      },
      plotOptions: {
        column: {
          zones: [{
            value: 0,
            color: 'red'
          }, {
            color: 'green'
          }]
        }
      },
      series: [{
        name: 'Natural Gas March 2017 Contract - Long',
        data: secondLeg1
      }, {
        name: 'Natural Gas April 2017 Contract - Short',
        data: secondLeg2,
        yAxis: 1
      }, {
        name: 'Spread (Long minus Short)',
        data: secondSpread,
        yAxis: 2
      }, {
        type: 'column',
        name: 'Profit/Loss in US Dollars',
        data: secondProfit,
        yAxis: 3
      }],

      exporting: {
        buttons: {
          reverseButton: {
            text: 'Reverse',
            onclick: function() {
              var reversed = this.yAxis[0].reversed;
              this.yAxis[0].update({
                reversed: !reversed
              });

              reversed = this.yAxis[1].reversed;
              this.yAxis[1].update({
                reversed: !reversed
              });

              reversed = this.yAxis[2].reversed;
              this.yAxis[2].update({
                reversed: !reversed
              });

              reversed = this.yAxis[3].reversed;
              this.yAxis[3].update({
                reversed: !reversed
              });

              this.redraw();
            },
            align: 'left',
            x: 350,
            y: 35
          },

          yearDownButton: {
            text: 'Year Down',
            onclick: function() {
              var xExtreme = this.xAxis[0].getExtremes();
              // console.log(xExtreme.min);
              this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
            },
            align: 'left',
            x: 450,
            y: 35
          },

          yearUpButton: {
            text: 'Year Up',
            onclick: function() {
              var xExtreme = this.xAxis[0].getExtremes();
              // console.log(xExtreme.min);
              this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
            },
            align: 'left',
            x: 550,
            y: 35
          }
        }
      }
    };

  function drawSecondChart() {
    secondChart = new Highcharts.StockChart(secondChartOptions);
  }


  $.ajax({

    url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20100301000000%22%2C%22end%3D20170228000000%22%2C%22daily%22%2C%22false%22%5D%5D&method=get",
    complete: function(data) {
      var jsonChartData = JSON.parse(data['responseText']);
      var secondChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20100301000000']['end=20170228000000']['daily']['false']['value']['message'];
      secondChartData = JSON.parse(secondChartData);
      var secondChartDataLength = secondChartData.length;




      for (var i = 0; i < secondChartDataLength; i++) {
        secondLeg1.push([
          secondChartData[i]['timestamp'],
          secondChartData[i]['leg1']
        ]);

        secondLeg2.push([
          secondChartData[i]['timestamp'],
          secondChartData[i]['leg2']
        ]);

        secondSpread.push([
          secondChartData[i]['timestamp'],
          secondChartData[i]['spread']
        ]);

        secondProfit.push([
          secondChartData[i]['timestamp'],
          secondChartData[i]['profit']
        ]);
      }

      drawSecondChart();

      $('#resetButton').on("click", function(e) {
        e.preventDefault();
        $("#secondChartContainer").empty();

        secondChartOptions.series = [];
        secondChartOptions.series.push({
          name: 'Natural Gas March 2017 Contract - Long',
          data: secondLeg1
        });
        secondChartOptions.series.push({
          name: 'Natural Gas April 2017 Contract - Short',
          data: secondLeg2,
          yAxis: 1
        });
        secondChartOptions.series.push({
          name: 'Spread (Long minus Short)',
          data: secondSpread,
          yAxis: 2
        });


        secondChartOptions.series.push({
          type: 'column',
          name: 'Profit/Loss in US Dollars',
          data: secondProfit,
          yAxis: 3
        });
        secondChart = new Highcharts.StockChart(secondChartOptions);
      });
    }
  });






  //third chart
  var thirdLeg1 = [],
    thirdLeg2 = [],
    thirdSpread = [],
    thirdProfit = [];



  var thirdChart = null,
    thirdChartOptions = {

      chart: {
        renderTo: 'thirdChartContainer',
        height: 600
      },
      rangeSelector: {
        selected: 1
      },

      title: {
        text: 'Natural Gas'
      },

      yAxis: [{
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'NG - Long'
        },
        height: '20%',
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'NG - Short'
        },
        top: '25%',
        height: '20%',
        offset: 0,
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'Spread'
        },
        top: '50%',
        height: '20%',
        offset: 0,
        lineWidth: 2
      }, {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'Profit/Loss'
        },
        top: '75%',
        height: '25%',
        offset: 0,
        lineWidth: 2
      }],

      tooltip: {
        split: true
      },
      plotOptions: {
        column: {
          zones: [{
            value: 0,
            color: 'red'
          }, {
            color: 'green'
          }]
        }
      },
      series: [{
        name: 'Natural Gas March 2017 Contract - Long',
        data: thirdLeg1
      }, {
        name: 'Natural Gas April 2017 Contract - Short',
        data: thirdLeg2,
        yAxis: 1
      }, {
        name: 'Spread (Long minus Short)',
        data: thirdSpread,
        yAxis: 2
      }, {
        type: 'column',
        name: 'Profit/Loss in US Dollars',
        data: thirdProfit,
        yAxis: 3
      }],

      exporting: {
        buttons: {
          reverseButton: {
            text: 'Reverse',
            onclick: function() {
              var reversed = this.yAxis[0].reversed;
              this.yAxis[0].update({
                reversed: !reversed
              });

              reversed = this.yAxis[1].reversed;
              this.yAxis[1].update({
                reversed: !reversed
              });

              reversed = this.yAxis[2].reversed;
              this.yAxis[2].update({
                reversed: !reversed
              });

              reversed = this.yAxis[3].reversed;
              this.yAxis[3].update({
                reversed: !reversed
              });

              this.redraw();
            },
            align: 'left',
            x: 350,
            y: 35
          },

          yearDownButton: {
            text: 'Year Down',
            onclick: function() {
              var xExtreme = this.xAxis[0].getExtremes();
              // console.log(xExtreme.min);
              this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
            },
            align: 'left',
            x: 450,
            y: 35
          },

          yearUpButton: {
            text: 'Year Up',
            onclick: function() {
              var xExtreme = this.xAxis[0].getExtremes();
              // console.log(xExtreme.min);
              this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
            },
            align: 'left',
            x: 550,
            y: 35
          }
        }
      }
    };

  function drawThirdChart() {
    thirdChart = new Highcharts.StockChart(thirdChartOptions);
  }


  $.ajax({

    url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20161212000000%22%2C%22end%3D20161212235900%22%2C%22minutes%22%2C%22false%22%5D%5D&method=get",
    complete: function(data) {
      var jsonChartData = JSON.parse(data['responseText']);
      var thirdChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20161212000000']['end=20161212235900']['minutes']['false']['value']['message'];
      thirdChartData = JSON.parse(thirdChartData);
      var thirdChartDataLength = thirdChartData.length;




      for (var i = 0; i < thirdChartDataLength; i++) {
        thirdLeg1.push([
          thirdChartData[i]['timestamp'],
          thirdChartData[i]['leg1']
        ]);

        thirdLeg2.push([
          thirdChartData[i]['timestamp'],
          thirdChartData[i]['leg2']
        ]);

        thirdSpread.push([
          thirdChartData[i]['timestamp'],
          thirdChartData[i]['spread']
        ]);

        thirdProfit.push([
          thirdChartData[i]['timestamp'],
          thirdChartData[i]['profit']
        ]);
      }

      drawThirdChart();

      $('#resetButton').on("click", function(e) {
        e.preventDefault();
        $("#thirdChartContainer").empty();

        thirdChartOptions.series = [];
        thirdChartOptions.series.push({
          name: 'Natural Gas March 2017 Contract - Long',
          data: thirdLeg1
        });
        thirdChartOptions.series.push({
          name: 'Natural Gas April 2017 Contract - Short',
          data: thirdLeg2,
          yAxis: 1
        });
        thirdChartOptions.series.push({
          name: 'Spread (Long minus Short)',
          data: thirdSpread,
          yAxis: 2
        });


        thirdChartOptions.series.push({
          type: 'column',
          name: 'Profit/Loss in US Dollars',
          data: thirdProfit,
          yAxis: 3
        });
        thirdChart = new Highcharts.StockChart(thirdChartOptions);
      });
    }
  });






});

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>

<div id="secondChartContainer" style="height: 600px; margin-top: 1em">
<div id="thirdChartContainer" style="height: 600px; margin-top: 1em"></div>

Here is the jsfiddle link:https://jsfiddle.net/mhasibb/r7p7fgqb/ Can u make it run? Error message: { "message": "Error: Highcharts error #13: www.highcharts.com/errors/13", "filename": "https://code.highcharts.com/stock/highstock.js", "lineno": 10, "colno": 49 } — Shovon Hasib, Feb 15 '17 at 16:24
@ShovonHasib This is working for me within Stack Snippets and JSFiddle; you're now running into mixed HTTP/HTTPS content issues. Your jsfiddle link is HTTPS, but your data is getting fetched over an HTTP connection. To see it working, drop the "s" in https for your jsfiddle link. — Chris Forrence, Feb 15 '17 at 16:26
Re: your second question, @ShovonHasib, your secondChartContainer div (referenced in the configuration) is missing. — Chris Forrence, Feb 15 '17 at 16:29
I don't have any worries about secontchartcontainer.I know that.But I can't get any chart. — Shovon Hasib, Feb 15 '17 at 16:35
@ShovonHasib Did you change your URL from `https://jsfiddle.net/mhasibb/r7p7fgqb/` to `http://jsfiddle.net/mhasibb/r7p7fgqb/`? — Chris Forrence, Feb 15 '17 at 16:38

Why I can't run this code in JsFiddle?Do I need to change html code?

1 Answers1