title: How to resolve "Uncaught TypeError: undefined is not a function" in javascript"?
body: <p>I am working on a D3.js example.</p>
  
  <p>It works fine on <a href="http://jsfiddle.net/waamit14/V6Qr8/" rel="nofollow noreferrer">this JS Fiddle</a>, however when I try the same code locally it starts throwing the following error:</p>
  
  <p>"<strong>Uncaught TypeError: undefined is not a function<br>
  update<br>
  loadImage<br>
  onclick</strong>"
  <img src="https://i.stack.imgur.com/OkPDE.jpg" alt="Here&#39;s a screenshot of the same">
  If you check the fiddle above, the  functions are  like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var w = 960,
      h = 500,
      node,
      path,
      root, nodes, links;
  
  var force, vis;
  var LoadData = true;
  
  function update() {
      if (force) force.stop();
      nodes = flatten(root);
      links = d3.layout.tree().links(nodes);
  
      force.nodes(nodes)
          .links(links)
          .linkDistance(120)
          .charge(-500)
          .start();
  
      path = vis.selectAll("path.link");
      path = path.data(force.links());
      path.exit().remove();
      path.enter().append("svg:path")
          .attr("class", "link")
          .attr("marker-end", "url(#end)");
      vis.selectAll(".node .simpleDiv").remove();
  
      node = vis.selectAll(".node");
      node = node.data(force.nodes());
      node.exit().remove();
      node.enter().append("g")
          .attr("class", "node")
          .on("click", click)
          .call(force.drag);
  
      node.append("foreignObject")
          .attr("class", "simpleDiv")
          .attr("width", function (d) {
          var f = document.createElement("span");
          f.id = "hiddenText";
          f.style.display = 'hidden';
          f.style.padding = '0px';
          f.innerHTML = d.name;
          document.body.appendChild(f);
          textWidth = f.offsetWidth;
          var f1 = document.getElementById('hiddenText');
          f1.parentNode.removeChild(f1);
          return textWidth + 50;
      })
          .attr("overflow", "visible")
          .attr("height", 50)
          .append("xhtml:div").attr("class", "mainDiv").style("cursor", hoverStyle)
          .html(function (d) {
          var htmlString = "";
  
  
          var userImage = "http://t2.gstatic.com/images?q=tbn:ANd9GcT6fN48PEP2-z-JbutdhqfypsYdciYTAZEziHpBJZLAfM6rxqYX";
          if (d.type == 'user') {
              htmlString += "&lt;div class='userImage' style='border-color:" + color(d) + "'&gt;&lt;image src='" + userImage + "' width='36' height='36'&gt;&lt;/image&gt;&lt;/div&gt;";
              htmlString += "&lt;div class='content' style='color:" + color(d) + ";'&gt;" + d.name + "&lt;/div&gt;";
              htmlString += "&lt;div style='clear:both;'&gt;&lt;/div&gt;";
          } else if (d.type == 'chat') {
              htmlString += "&lt;div class='docIcon'&gt;&lt;i class='icon-comment icon-3x'&gt;&lt;/i&gt;&lt;/div&gt;";
              htmlString += "&lt;div class='content' style='color:" + color(d) + ";'&gt;" + d.name + "&lt;/div&gt;";
              htmlString += "&lt;div style='clear:both;'&gt;&lt;/div&gt;";
          } else if (d.type == 'message') {
              htmlString += "&lt;div class='docIcon'&gt;&lt;i class='icon-file-alt icon-3x'&gt;&lt;/i&gt;&lt;/div&gt;";
              htmlString += "&lt;div class='content' style='color:" + color(d) + ";'&gt;" + d.name + "&lt;/div&gt;";
              htmlString += "&lt;div style='clear:both;'&gt;&lt;/div&gt;";
          } else {
              htmlString += "&lt;div class='docIcon'&gt;&lt;i class='icon-exclamation icon-3x'&gt;&lt;/i&gt;&lt;/div&gt;";
              htmlString += "&lt;div class='content' style='color:" + color(d) + ";'&gt;" + d.name + "&lt;/div&gt;";
              htmlString += "&lt;div style='clear:both;'&gt;&lt;/div&gt;";
          }
          return htmlString;
      });
  }
  
  function tick() {
      path.attr("d", function (d) {
  
          var dx = d.target.x - d.source.x,
              dy = d.target.y - d.source.y,
              dr = Math.sqrt(dx * dx + dy * dy);
          return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
      });
  
      node.attr("transform", function (d) {
          return "translate(" + (d.x - 15) + "," + (d.y - 15) + ")";
      });
  
  }
  
  function color(d) {
      return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
  }
  
  function hoverStyle(d) {
      return d._children ? "pointer" : d.children ? "pointer" : "default";
  }
  // Toggle children on click.
  function click(d) {
      if (d.children) {
          d._children = d.children;
          d.children = null;
      } else {
          d.children = d._children;
          d._children = null;
      }
      update();
  }
  
  var findNode = function (node) {
      for (var i in force.nodes()) {
          if (force.nodes()[i] === node) return true
      };
      return false;
  }
  
      function flatten(root) {
          var nodes = [],
              i = 0;
  
          function recurse(node) {
              if (node.children) node.children.forEach(recurse);
              if (!node.id) node.id = ++i;
              nodes.push(node);
          }
  
          recurse(root);
          return nodes;
      }
  
      function loadImage() {
          if (LoadData) {
              root = {
                  "name": "physics",
                      "imageURL": "",
                      "type": "user",
                      "children": [{
                      "name": "DragForce",
                          "imageURL": "",
                          "size": 1082,
                          "type": "user"
                  }, {
                      "name": "GravityForce",
                          "imageURL": "",
                          "size": 1336,
                          "type": "user"
                  }, {
                      "name": "IForce",
                          "imageURL": "",
                          "size": 319,
                          "type": "user"
                  }, {
                      "name": "NBodyForce",
                          "imageURL": "",
                          "size": 10498,
                          "type": "user"
                  }, {
                      "name": "Node 1",
                          "imageURL": "",
                          "type": "user",
                          "children": [{
                          "name": "DragForce 1.1",
                              "imageURL": "",
                              "size": 1082,
                              "type": "chat"
                      }, {
                          "name": "DragForce 1.2",
                              "imageURL": "",
                              "size": 1082,
                              "type": "message"
                      }]
                  },
  
                  {
                      "name": "Particle",
                          "imageURL": "",
                          "size": 2822,
                          "type": "user"
                  }, {
                      "name": "Simulation",
                          "imageURL": "",
                          "size": 9983,
                          "type": "user"
                  }, {
                      "name": "Node 2",
                          "imageURL": "",
                          "type": "user",
                          "children": [{
                          "name": "DragForce 2.1",
                              "imageURL": "",
                              "size": 1082,
                              "type": "message"
                      }, {
                          "name": "DragForce 2.2",
                              "imageURL": "",
                              "size": 1082,
                              "type": "message"
                      }]
                  },
  
                  {
                      "name": "Spring",
                          "imageURL": "",
                          "size": 2213,
                          "type": "user"
                  }, {
                      "name": "SpringForce",
                          "imageURL": "",
                          "size": 1681,
                          "type": "user"
                  }, {
                      "name": "Node 3",
                          "imageURL": "",
                          "type": "user",
                          "children": [{
                          "name": "DragForce 2.1",
                              "imageURL": "",
                              "size": 1082,
                              "type": "chat"
                      }, {
                          "name": "DragForce 3.2",
                              "imageURL": "",
                              "size": 1082,
                              "type": "chat"
                      }]
                  }]
              };
  
              force = d3.layout.force()
                  .on("tick", tick)
                  .size([w, h]);
  
              vis = d3.select("#chart").append("svg:svg")
                  .attr("width", w)
                  .attr("height", h);
              update();
              LoadData = false;
          }
  
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>circle.node {
      cursor: pointer;
      stroke: #3182bd;
      stroke-width: 1.5px;
  }
  path.link {
      fill: none;
      stroke: #666;
      stroke-width: 1.5px;
  }
  .simpleDiv {
      position: absolute;
      overflow: visible;
  }
  .simpleDiv .mainDiv {
      overflow: visible;
      width: 100%;
  }
  .simpleDiv .mainDiv .userImage {
      width: 36px;
      height: 36px;
      border: 2px solid;
      border-radius:30px;
      overflow: hidden;
  }
  .simpleDiv .mainDiv .docIcon {
      width: 36px;
  }
  .simpleDiv .mainDiv .content {
      margin-left: 45px;
      margin-top: -30px;
  }
  #hiddenText {
      visibility: hidden;
      padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="chart"&gt;&lt;/div&gt;
  &lt;input type="button" name="loadImage" value="Load" onClick="loadImage();" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I had properly loaded the D3.JS file and the Javascript code for that example in proper sequence.</p>
  
  <p>I also tried using <em>this</em> keyword but I didn't get the result. (May be I have used it incorrectly, I would really appreciate if some one could suggest proper reference usage of <em>this</em> keyword in this example).</p>
  
  <p>Thank You</p>