Why can't my HTML dropdown find my function?

Question

So I am trying to make a simple dropdown menu that when a value is clicked a function is run, but I'm having some issues accessing the function.

When I run this fiddle (code below), I get a console message of 'made it'.

HTML

<div id="dropdown">
<select>
    <option>Near</option>
    <option onclick="console.log('made it');">Far</option>
    <option>Very Far</option>
    <option>Distant</option>
</select>
</div>

But if I try to move the message into a function like in this fiddle (code below), I get an error saying the function test is not defined.

HTML

<div id="dropdown">
<select>
    <option>Near</option>
    <option onclick="test();">Far</option>
    <option>Very Far</option>
    <option>Distant</option>
</select>
</div>

JavaScript

var test = function () {
    console.log("Made it");
};

Can someone explain why this is happening? Shouldn't my HTML onclick be able to find the test() function?

actually the code [works](http://jsfiddle.net/wdoL3auq/v) with a correct setup. — Teemu, Jan 12 '15 at 16:32
@Mikey [where the hell did your heard that?](http://jsfiddle.net/ypye1anx/) — DontVoteMeDown, Jan 12 '15 at 16:40
@DontVoteMeDown Hmmmm, I must have wrongly remembered. I have read an article a while ago that looked for a cleaner way. Sorry... http://www.wkoorts.com/wkblog/2013/01/26/console-log-with-jsfiddle/ — Michelangelo, Jan 12 '15 at 16:44
@Mikey Ok, I mean, `console` is a native object so there is nothing to do with jsfiddle itself. — DontVoteMeDown, Jan 12 '15 at 16:46

Why can't my HTML dropdown find my function?

0 Answers0