Why is var in same function is not defined? : <p>I have a code like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
    &lt;script language="javascript"&gt;
        window.onload = function() {
            var wordlist = [ "A", "BB", "CCC", "DDDD" ];

            for(i = 0; i &lt; 26; i++) {
                var x = document.createElement("INPUT");
                x.setAttribute("type", "button");
                x.setAttribute("value", String.fromCharCode(i + 65));
                x.setAttribute("id", String.fromCharCode(i + 65));
                x.setAttribute("onclick", "isTOF(this.id, wordlist[3])");
                document.body.appendChild(x);
            }
        }

        function isTOF(v, word) {
            console.log(word);
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>I thought that <code>console.log(word)</code> will show me "DDDD", but it says like this:</p>

<blockquote>
  <p>wordlist is not defined</p>
</blockquote>

<p>How can I make it run?</p>
