Uncaught ReferenceError: $$ is not defined

Question

I'm trying to programmatically create a pie chart in hopes of turning it into a React Component to reuse. Basically I need a pie chart that is clickable and each slice expands into a whole pie when clicked. I'm trying to follow this tutorial to making pie charts and at the bottom, I have a piece of JS that I tried to test out. I ended up getting Uncaught Reference Error: $$ is not defined. Here's a screenshot of error message.

My understanding is that this is not jQuery and is simply Vanilla JS. I'm not sure if this is true. I imported jQuery via a CDN and still got the same error. I read this SO post and I'm thinking $$ is simply a kind of variable name notation.

This is the code I have in index.html, nothing groundbreaking.

<body>
  <div class="pie">20%</div>
  <div class="pie">60%</div>
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $$('.pie').forEach(function(pie) {
      var p = parseFloat(pie.textContent);
      var NS = "http://www.w3.org/2000/svg";
      var svg = document.createElementNS(NS, "svg");
      var circle = document.createElementNS(NS, "circle");
      var title = document.createElementNS(NS, "title");
      circle.setAttribute("r", 16);
      circle.setAttribute("cx", 16);
      circle.setAttribute("cy", 16);
      circle.setAttribute("stroke-dasharray", p + " 100");
      svg.setAttribute("viewBox", "0 0 32 32");
      title.textContent = pie.textContent;
      pie.textContent = '';
      svg.appendChild(title);
      svg.appendChild(circle);
      pie.appendChild(svg);
    });
  </script>
</body>

What's causing the error? Am I misunderstanding? Is the tutorial I'm following outdated/wrong? Thank you!

Please edit your question and provide your code als text - not als an image. — Steve, Aug 11 '16 at 06:13

score 7 · Accepted Answer · answered Aug 11 '16 at 06:15

7

Include the following:

function $$(selector, context) {
  context = context || document;
  var elements = context.querySelectorAll(selector);
  return Array.prototype.slice.call(elements);
}

According to the author, Lea Verou, she mentions:

in the book the definition of $$() is given in the introduction, but since this is an excerpt, it doesn’t include that.

answered Aug 11 '16 at 06:15

philip yoo

2,462
5
22
37

Oh thank you!! This is super helpful and fixed it. My hunches were right :D Anyways, I'll accept as answer once SO allows it :) – Sticky Aug 11 '16 at 06:21

M.Tanzil · Answer 2 · 2016-08-11T06:30:34.313

2

From tutorial you mention in your question i got something that will help you.

Also, you need to wrap your code in,

$(function(){....});

As you mention jquery in your tags.

Hope this helps.

edited Aug 11 '16 at 06:30

answered Aug 11 '16 at 06:25

M.Tanzil

1,987
1
12
28

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

0

Have you tried to use single $ instead double $$ on $$('.pie') so your code like $('.pie') ?

And check if you already to include jQuery

Here is helpful link

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

https://api.jquery.com/

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 11 '16 at 06:12

Engkus Kusnadi

2,386
2
18
40

Uncaught ReferenceError: $$ is not defined

3 Answers3