Access .click() scope inside variable globally

Question

I am trying to add google trend chart on a html document. Problem is I have to grab on click keyword and pass it to google trend function so it can return data as clicked keyword. But for some reason when i call google trend function (named- TIMESERIES) inside .click scope it only load the chart not whole html so I have to call this function from outside .click scope. how can i make "categoryName" variable available global then? any idea?

However my question solution might be available here. But I need help to implement that solution with my existing code.

<script>
  function TIMESERIES(categoryName) {
    return trends.embed.renderExploreWidget("TIMESERIES", {
      "comparisonItem": [{
        "keyword": categoryName,
        "geo": "",
        "time": "today 12-m"
      }],
      "category": 0,
      "property": ""
    }, {
      "exploreQuery": "q=arts&date=today 12-m",
      "guestPath": "https://trends.google.co.in:443/trends/embed/"
    });
  }

  var categoryName = "";

  $(".SearchMainCategory, .SearchSubCategory").click(function() {
    categoryName = $(this).find("#Level1CatsName").val();
    if (typeof categoryName === "undefined") {
      categoryName = $(this).find("#Level2CatsName").val();
    }

    // TIMESERIES(categoryName) if i call this function from where then only this function (google trend chart actually) loads and page other contents not loading. so i need to call from outside then it works fine but i cant access "categoryName" variable from ourside.
  });

  TIMESERIES(categoryName);
</script>

when you say it doesn't render the whole html what are you expecting and not getting? The rest of the page? or some part of the chart? — ktilcu, Oct 16 '17 at 16:09
The problem isn't scope, it's **timing**. See the linked question's answers for why. — T.J. Crowder, Oct 16 '17 at 16:10

Access .click() scope inside variable globally

0 Answers0