title

slug

content

excerpt

Typescript - What is the difference between null and undefined?

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Did you assign an id to the freshly created element? Did you insert the element into the document tree (using <code>appendChild</code> or <code>insertBefore</code>)? As long as the element is not inserted into the DOM, you can't retrieve it using <code>document.getElementById</code>.</p>
<p>Example of element creation:</p>
<pre><code>var myDiv = document.createElement('div');
myDiv.id = 'myDiv';
document.body.appendChild(myDiv);
document.getElementById('myDiv').innerHTML = 'this should have worked...';
</code></pre>
<p>[<strong>edit</strong>] Given the later supplied code, a third question emerges: is your script located at the bottom of your html page (right before the closing <code>&lt;/body&gt;</code> tag)? If it's in the header of the document, your scripting may be running <em>before</em> the document tree is completely rendered. If your script has to be in the header of the document, you could use a load handler to run it <em>after</em> rendering of the document:</p>
<pre><code>window.onload = function(){
  document.getElementById("web").innerHTML='&lt;object id="test2"&gt;&lt;/object&gt;';
  // [...]
  var obj = document.getElementById('test2');
};
</code></pre>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>To add an element using JavaScript, you need to do 2 things.</p>
<ol>
<li><p>Create the element</p>
<p>var element = document.createElement(tagName);</p></li>
<li><p>Add it to the dom</p>
<p>document.body.insertBefore(selector, element);</p></li>
</ol>
<p>or</p>
<pre><code>  document.getElementByID(selector).appendChild(element);
</code></pre>
<p>More info here: <a href="https://developer.mozilla.org/en/DOM/document.createElement" rel="nofollow">MDN</a></p>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>If a DOM node is dynamically created, then there's no need EVER to find it again with <code>document.getElementById()</code>.</p>
<p>By creating the node in the right way, you can keep a reference to it as a javascript variable, which can be used anywhere within scope.</p>
<p>For example:</p>
<pre><code>window.onload = function(){
    var myDiv = document.createElement('div');
    document.body.appendChild(myDiv);

    //and now a function that's called in response to some future event
    function whatever(){
        ...
        myDiv.style.color = 'red';
        ...
    }
};
</code></pre>
<p>Note: The inner function (called at some point(s) future) has access to the <code>myDiv</code> variable because the outer function forms a "closure", within which variables are kept alive and accessible, even though the outer function has completed and returned.</p>
</div>

getElementById Where Element is dynamically created at runtime

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Have you ever looked at <a href="http://premiumsoftware.net/cleditor/" rel="noreferrer">cleditor</a>?  That in conjunction with jquery UI <a href="http://jqueryui.com/demos/draggable/" rel="noreferrer">draggable</a> and <a href="http://jqueryui.com/demos/droppable/" rel="noreferrer">droppable</a> should allow you to do what you want.</p>
<p>I used it in a custom lightweight content editor.  Works very well.  If I ever revisit that project, or do something similar I would create pre-configured draggable content sections so web neophytes could customize their pages even more.</p>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Looked a bit around after opening a bounty. Perhaps using the <a href="https://atom.io/">atom text editor</a> to make markdown and using a <a href="https://github.com/atom/markdown-preview">markdown preview</a> could be a way to do it? Then you could use some tool like <a href="http://pandoc.org/">pandoc</a> to convert the markdown to xml.</p>
<p>I know it is not drag and drop, but it's better than M$ word.</p>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p><a href="https://github.com/yabwe/medium-editor" rel="nofollow">medium-editor</a> seems to be a well-managed clone of the really great editor found on <a href="https://medium.com/" rel="nofollow">Medium</a> whose <a href="https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480" rel="nofollow">architectural principles are explained in here</a>.</p>
<p>The solution here would do away with the drag &amp; drop idea. Instead, the user selects any bit of text and then sees a toolbar pop up, allowing them to do any formatting they need. That <a href="https://github.com/yabwe/medium-editor#toolbar-options" rel="nofollow">toolbar can be customized</a> to suit your end-users' needs.</p>
<p>In the end, you get a well-formed (X)HTML string that's nice and clean. In order to do your styling, you could simply inject a <code>&lt;link rel="stylesheet" href="/some/file.css" /&gt;</code>.</p>
<p><a href="http://jsfiddle.net/sean9999/ut7mk5x5/6/" rel="nofollow">http://jsfiddle.net/sean9999/ut7mk5x5/6/</a></p>
<p><div class="snippet" data-hide="false" data-lang="js">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>;(function(w,d,undeinfed){
    "use strict";
    d.addEventListener('DOMContentLoaded',function(){
        var e = d.querySelector('.editable'); // editable div
        var o = d.querySelector('#o'); // debug output
        var f = d.querySelector('#f'); // form
        var editor = new MediumEditor(e);
        var saveDocument = function(htmlfragments){
            var article = '&lt;article&gt;' + htmlfragments + '&lt;/article&gt;';
            //    issue an AJAX call with "article" as the payload
            alert( article.replace(/\s{2,}/g,'') );
        };
        f.addEventListener('submit',function(ev){
            ev.preventDefault();
            saveDocument(e.innerHTML);
        });
        editor.subscribe('editableInput', function (event, editable) {
            o.textContent = e.innerHTML;
        });
        o.textContent = e.innerHTML;
    });
})(window,document);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    color: gray;
    font-size: small;
}
article {
    border: 3px dotted rgba(255,0,0,.2);
    background-color: rgba(0,0,0,.0333);
    padding: 1em;
}
button {
    font-size: bigger;
    padding: .5em;
    margin: .5em;
}
.editable {
    outline: none;
}
output {
    border: 3px dotted rgba(0,0,255,0.25);
    margin-top: 1em;
    min-height: 5em;
    display: block;
    padding: 1em;
    font-family: Verdana;
    font-size: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/medium-editor.css" rel="stylesheet"/&gt;
&lt;link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/themes/default.css" rel="stylesheet"/&gt;
&lt;link href="http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" rel="stylesheet"/&gt;
&lt;script src="http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"&gt;&lt;/script&gt;

&lt;section&gt;
    &lt;article&gt;
        &lt;div class="editable"&gt;
            &lt;h2&gt;Edit me, I'm a heading.&lt;/h2&gt;
            &lt;p&gt;Edit me too, Chambray letterpress Godard meh, Echo Park slow-carb post-ironic whatever farm-to-table. Sriracha disrupt retro 90's, quinoa deep v Vice migas freegan pickled tattooed. Fashion axe meggings small batch, scenester Carles banh mi Shoreditch salvia.&lt;/p&gt;
        &lt;/div&gt;        
    &lt;/article&gt;
&lt;/section&gt;

&lt;form name="f" id="f" action="#"&gt;
    &lt;button type="submit"&gt;save the document&lt;/button&gt;
&lt;/form&gt;

&lt;output for="f" id="o"&gt;&lt;/output&gt;</code></pre>
</div>
</div>
</p>
</div>

Create Drag and Drop Editing Platform in HTML5

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>This works with button click. Stolen from <a href="https://stackoverflow.com/questions/9185630/find-out-the-line-row-number-of-the-cursor-in-a-textarea">Find out the 'line' (row) number of the cursor in a textarea</a></p>
<pre><code>​function getline()
{
    var t = $("#t")[0];
    alert(t.value.substr(0, t.selectionStart).split("\n").length);
}​
</code></pre>
<p>HTML</p>
<pre><code>​&lt;textarea rows="6" id="t"&gt;
there is no
love in the ghetto
so come here
and get it
&lt;/textarea&gt;
&lt;input type="button" onclick="getline()" value="get line" /&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</code></pre>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>This can be split up in three steps:</p>
<ul>
<li><a href="https://stackoverflow.com/q/263743/1048572">Caret position in textarea, in characters from the start</a></li>
<li><a href="https://stackoverflow.com/q/2035910/1048572">How to get the number of lines in a textarea?</a> / <a href="https://stackoverflow.com/q/863779/1048572">JavaScript: How to add line breaks to an HTML textarea?</a></li>
<li>get the lines before the caret, and count them.</li>
</ul>
<p>I guess you don't want to consider wrapped text and scrolled content. Assuming you use the function from <a href="https://stackoverflow.com/a/263796/1048572">this answer</a>, it would be like:</p>
<pre><code>var el = document.getElementById("inputarea"); // or something

var pos = getCaret(el),
    before = el.value.substr(0, pos),
    lines = before.split(/\r?\n/);
return lines.length;
</code></pre>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>You can use the following approach</p>
<ol>
<li><a href="https://stackoverflow.com/questions/263743/how-to-get-caret-position-in-textarea">Find the caret positio</a>n (index).</li>
<li>Find the substring from position 0 to index</li>
<li>Search for number of new lines in the substring obtained in step 2.</li>
</ol>
<p>// Test</p>
<pre><code>$(function() {
    $('#test').keyup(function() {
        var pos = 0;
        if (this.selectionStart) {
            pos = this.selectionStart;
        } else if (document.selection) {
            this.focus();

            var r = document.selection.createRange();
            if (r == null) {
                pos = 0;
            } else {

                var re = this.createTextRange(),
                rc = re.duplicate();
                re.moveToBookmark(r.getBookmark());
                rc.setEndPoint('EndToStart', re);

                pos = rc.text.length;
            }
        }
        $('#c').html(this.value.substr(0, pos).split("\n").length);
    });
});
​
</code></pre>
<p>Here is a working example
<a href="http://jsfiddle.net/S2yn3/1/" rel="nofollow noreferrer">http://jsfiddle.net/S2yn3/1/</a></p>
</div>

Getting Line Number In Text Area

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>The problem is that if you try to write a <code>&lt;table&gt;</code> or a <code>&lt;tr&gt;</code> or <code>&lt;td&gt;</code> tag using JS every time you insert a new tag the browser will try to close it as it will think that there is an error on the code. </p>
<p>Instead of writing your table line by line, concatenate your table into a variable and insert it once created:</p>
<pre><code>&lt;script language="javascript" type="text/javascript"&gt;
&lt;!--

var myArray    = new Array();
    myArray[0] = 1;
    myArray[1] = 2.218;
    myArray[2] = 33;
    myArray[3] = 114.94;
    myArray[4] = 5;
    myArray[5] = 33;
    myArray[6] = 114.980;
    myArray[7] = 5;

    var myTable= "&lt;table&gt;&lt;tr&gt;&lt;td style='width: 100px; color: red;'&gt;Col Head 1&lt;/td&gt;";
    myTable+= "&lt;td style='width: 100px; color: red; text-align: right;'&gt;Col Head 2&lt;/td&gt;";
    myTable+="&lt;td style='width: 100px; color: red; text-align: right;'&gt;Col Head 3&lt;/td&gt;&lt;/tr&gt;";

    myTable+="&lt;tr&gt;&lt;td style='width: 100px;                   '&gt;---------------&lt;/td&gt;";
    myTable+="&lt;td     style='width: 100px; text-align: right;'&gt;---------------&lt;/td&gt;";
    myTable+="&lt;td     style='width: 100px; text-align: right;'&gt;---------------&lt;/td&gt;&lt;/tr&gt;";

  for (var i=0; i&lt;8; i++) {
    myTable+="&lt;tr&gt;&lt;td style='width: 100px;'&gt;Number " + i + " is:&lt;/td&gt;";
    myArray[i] = myArray[i].toFixed(3);
    myTable+="&lt;td style='width: 100px; text-align: right;'&gt;" + myArray[i] + "&lt;/td&gt;";
    myTable+="&lt;td style='width: 100px; text-align: right;'&gt;" + myArray[i] + "&lt;/td&gt;&lt;/tr&gt;";
  }  
   myTable+="&lt;/table&gt;";

 document.write( myTable);

//--&gt;
&lt;/script&gt; 
</code></pre>
<p>If your code is in an external JS file, in HTML create an element with an ID where you want your table to appear:</p>
<pre><code>&lt;div id="tablePrint"&gt; &lt;/div&gt;
</code></pre>
<p>And in JS instead of <code>document.write(myTable)</code> use the following code:</p>
<pre><code>document.getElementById('tablePrint').innerHTML = myTable;
</code></pre>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<pre><code>In the html file there are three input boxes with userid,username,department respectively.
</code></pre>
<p>These inputboxes are used to get the input from the user.</p>
<p>The user can add any number of inputs to the page.</p>
<p>When clicking the button the script will enable the debugger mode.</p>
<p>In javascript, to enable the debugger mode, we have to add the following tag in the javascript.</p>
<p>/************************************************************************\</p>
<pre><code>    Tools-&gt;Internet Options--&gt;Advanced--&gt;uncheck
    Disable script debugging(Internet Explorer)
    Disable script debugging(Other)

    &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;

    &lt;head runat="server"&gt;

    &lt;title&gt;Dynamic Table&lt;/title&gt;

    &lt;script language="javascript" type="text/javascript"&gt;

    // &lt;!CDATA[

    function CmdAdd_onclick() {

    var newTable,startTag,endTag;



    //Creating a new table

    startTag="&lt;TABLE id='mainTable'&gt;&lt;TBODY&gt;&lt;TR&gt;&lt;TD style=\"WIDTH: 120px\"&gt;User ID&lt;/TD&gt;
    &lt;TD style=\"WIDTH: 120px\"&gt;User Name&lt;/TD&gt;&lt;TD style=\"WIDTH: 120px\"&gt;Department&lt;/TD&gt;&lt;/TR&gt;"

    endTag="&lt;/TBODY&gt;&lt;/TABLE&gt;"

    newTable=startTag;

    var trContents;

    //Get the row contents

    trContents=document.body.getElementsByTagName('TR');

    if(trContents.length&gt;1)

    {

    for(i=1;i&lt;trContents.length;i++)

    {

    if(trContents(i).innerHTML)

    {

    // Add previous rows

    newTable+="&lt;TR&gt;";

    newTable+=trContents(i).innerHTML;

    newTable+="&lt;/TR&gt;";

    } 

    }

    }

    //Add the Latest row

    newTable+="&lt;TR&gt;&lt;TD style=\"WIDTH: 120px\" &gt;" +
        document.getElementById('userid').value +"&lt;/TD&gt;";

    newTable+="&lt;TD style=\"WIDTH: 120px\" &gt;" +
        document.getElementById('username').value +"&lt;/TD&gt;";

    newTable+="&lt;TD style=\"WIDTH: 120px\" &gt;" +
        document.getElementById('department').value +"&lt;/TD&gt;&lt;TR&gt;";

    newTable+=endTag;

    //Update the Previous Table With New Table.

    document.getElementById('tableDiv').innerHTML=newTable;

    }

    // ]]&gt;

    &lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;

    &lt;form id="form1" runat="server"&gt;

    &lt;div&gt;

    &lt;br /&gt;

    &lt;label&gt;UserID&lt;/label&gt; 

    &lt;input id="userid" type="text" /&gt;&lt;br /&gt;

    &lt;label&gt;UserName&lt;/label&gt; 

    &lt;input id="username" type="text" /&gt;&lt;br /&gt;

    &lt;label&gt;Department&lt;/label&gt; 

    &lt;input id="department" type="text" /&gt;

    &lt;center&gt;

    &lt;input id="CmdAdd" type="button" value="Add" onclick="return CmdAdd_onclick()" /&gt;
    &lt;/center&gt;



    &lt;/div&gt;

    &lt;div id="tableDiv" style="text-align:center" &gt;

    &lt;table id="mainTable"&gt;

    &lt;tr style="width:120px " &gt;

    &lt;td &gt;User ID&lt;/td&gt;

    &lt;td&gt;User Name&lt;/td&gt;

    &lt;td&gt;Department&lt;/td&gt;

    &lt;/tr&gt;

    &lt;/table&gt;

    &lt;/div&gt;

    &lt;/form&gt;

    &lt;/body&gt;

    &lt;/html&gt;
</code></pre>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>This beautiful code here creates a table with each td having array values. Not my code, but it helped me!</p>
<pre><code>var rows = 6, cols = 7;

for(var i = 0; i &lt; rows; i++) {
  $('table').append('&lt;tr&gt;&lt;/tr&gt;');
  for(var j = 0; j &lt; cols; j++) {
    $('table').find('tr').eq(i).append('&lt;td&gt;&lt;/td&gt;');
    $('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j);
  }
}
</code></pre>
</div>

Create HTML table using Javascript

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Will work:</p>
<pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;$('body').append('Yey');&lt;/script&gt;
</code></pre>
<p>Will not work:</p>
<pre><code>&lt;script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;$('body').append('Yey');&lt;/script&gt;
</code></pre>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>The async attribute is just a clearer (no ambiguity very straightforward) and cleaner (it will, or is already, part of the respected HTML5 specification) approach to solve the problem. If your site serves scripts from another domain (or CDN) then the async attribute gives you a little reliability (allow the user to at least read the static content) in that the page won't block while a script from a slow (possibly down) remote host is trying to load.</p>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>There was a great <a href="http://www.html5rocks.com/en/tutorials/speed/script-loading/" rel="nofollow">article</a> from Jake Archibald on html5rocks which addresses this topic.</p>
</div>

What exactly is the benefit of the HTML5 async attribute on script elements?

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>I've been using the waitForSelector 'workaround' mentioned by Arun here:
<a href="https://stackoverflow.com/a/22217657/1842033">https://stackoverflow.com/a/22217657/1842033</a></p>
<p>It's the best solution I've found; the 'drawback' as it were is that you need to be aware of what element you're expecting to load. I say drawback, personally I don't think I've encountered a situation where I've not had <em>some</em>  kind of feedback saying that whatever I'm waiting for has happened</p>
<pre><code>this.waitForSelector("{myElement}",
    function pass () {
        test.pass("Found {myElement}");
    },
    function fail () {
        test.fail("Did not load element {myElement}");
    },
    20000 // timeout limit in milliseconds
);
</code></pre>
<p>Although I'd guess you could use <a href="http://docs.casperjs.org/en/latest/modules/casper.html#waitforresource" rel="nofollow noreferrer">waitForResource()</a> or something like that if you didn't have visual feedback.</p>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>What I've taken to doing to get around this issue, when there isn't anything specific to target and wait for in the reloaded page, is to use the following:</p>
<pre><code>var classname = 'reload-' + (new Date().getTime()),
    callback = function(){},
    timeout = function(){};

/// It happens when they change something...
casper.evaluate(function(classname){
  document.body.className += ' ' + classname;
}, classname);

casper.thenClick('#submit'); /// &lt;-- will trigger a reload of the page
casper.waitWhileSelector('body.' + classname, callback, timeout);
</code></pre>
<p>This way I don't have to rely on a specific expected element in the next page, I've basically done the inverse. I've created a specific selector to watch out for, and execution moves on once that selector fails to match.</p>
<p>For my intents and purposes it was enough to know the page had begun reloading, I didn't need to wait until the next page had fully reloaded. This is so that I could then trigger certain <code>waitForSelector</code> calls on elements that may have existed both before and after the reload. Waiting until the temporary class has been removed lets me know that anything that existed before has since been destroyed, so no fear of selecting elements prior to the reload.</p>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Seems there are no real solutions.
<a href="http://docs.casperjs.org/en/latest/modules/casper.html#waitforselector" rel="nofollow">http://docs.casperjs.org/en/latest/modules/casper.html#waitforselector</a> is an available workaround which may not work always.</p>
</div>

How to wait for page loading when using casperjs?

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>You need to verify the same data you signed: <code>verifier.update(sign);</code> should be <code>verifier.update('hola');</code></p>
</div>

Can't verify signature witn Node.js Crypto, using key pairs

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>here is a workding jsfiddle of your code: <br/>
<code>new Chart(rice).Line(riceData);</code> <br/>
<a href="http://jsfiddle.net/mahmalsami/jqcthmyo/" rel="noreferrer">http://jsfiddle.net/mahmalsami/jqcthmyo/</a> <br/>
So the problem is definitively coming from your external Chart.min.js inclusion <br/>
<br/>
You may find a 404 on your js get. Please make sure you're linking to the correct js folder. (try accessing your localhost/Chart.min.js to see if you can access to your file)</p>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>I was also getting same error. To fix this I moved the chart script into separate graph.js file.</p>
<p>Still I was getting same error. Which is fixed later when I put  tag in following order before end of  tag as shown below.</p>
<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jscript/graph.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>The page look like this:
<a href="https://i.stack.imgur.com/QNrfd.png" rel="noreferrer"><img alt="enter image description here" src="https://i.stack.imgur.com/QNrfd.png"/></a></p>
<p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;

&lt;canvas id="myChart"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>I got the same error. To solve the problem, you have to include the chart.js library correctly as follows:</p>
<p><code>&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"&gt;&lt;/script&gt;</code></p>
</div>

ReferenceError: Chart is not defined - chartjs

<h2>Solution 1:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Closures have to do with how javascript is scoped.  To say it another way, because of the scoping choices (i.e. lexical scoping) the javascript designers made, closures are possible.</p>
<p>The advantage of closures in javascript is that it allows you to bind a variable to an execution context. </p>
<pre><code>var closedIn = {};

var f = function(){
   closedIn.blah = 'blah'; // closedIn was just "closed in" because I used in the function, but it was defined outside the function.
}
</code></pre>
<p>in that example, you have a normal object literal called <code>closedIn</code>.  It is accessed in a function.  Because of that, javascript knows it has to bring <code>closedIn</code> everywhere it brings the function <code>f</code>, so it is available to <code>f</code>.</p>
<p>The <code>this</code> keyword is tricky.  <code>this</code> is always a reference to the execution scope.  You can capture the <code>this</code> of one context to use in another context as follows:</p>
<pre><code>var that = this;
var f = function(){
    that.somethingOnThat();
   // `this` means the scope f, `that` means whatever 'this' was when defined outside of the function
}
</code></pre>
<p>This trick can be very useful somethings, if you are coding object oriented javascript and want a callback to have access to some external scope.</p>
<p>To quote from a Javascript book: </p>
<blockquote>
<p>"Functions in JavaScript are lexically
  rather than dynamically scoped.  This
  means that they run in the scope in
  which they are defined, not the scopee
  from which they are executed.  When a
  function is defined, the current scope
  chain is saved and becomes part of the
  internal state of the function."</p>
</blockquote>
<p>So the clear advantage is that you can bring any object (functions, objects, etc) along with the scope chain as far as is necessary.  This is can also be considered a risk, because your apps can easily consume lots of memory if you are not careful.</p>
</div><h2>Solution 2:</h2><div class="s-prose js-post-body" itemprop="text">
<p>I think the best phrase to sum up the purpose of closures would be:</p>
<h2>Data Encapsulation</h2>
<p>With a function closure you can store data in a separate scope, and share it only where necessary.</p>
<p>If you wanted to emulate <code>private static variables</code>, you could define a class inside a function, and define the <code>private static vars</code> within the closure:</p>
<pre><code>(function () {
    var foo;
    foo = 0;
    function MyClass() {
        foo += 1;
    }
    MyClass.prototype = {
        howMany: function () {
            return foo;
        }
    };
    window.MyClass = MyClass;
}());
</code></pre>
</div><h2>Solution 3:</h2><div class="s-prose js-post-body" itemprop="text">
<p>Closures are necessary in javascript due to the fact that most API's that require callback functions (for instance, an "onclick" function) do not provide other mechanisms to send parameters to those callback functions (or to explicitly set the "this" pointer).  Instead, you need to use closures to allow the callback to access variables in the "parent" function. </p>
<p>I personally wish that they weren't necessary, since they can be hard to understand, make for hard to read code (it's not always clear what exactly is in scope), and make for weird bugs.    Instead I wish there was a standard for callbacks that allowed you to send parameters, etc.  But I accept that I am in the minority in this view.</p>
</div>

New posts