Funktion nicht definiert Javascript (Basic)

Question

Entschuldigen Sie die Mühe mit dieser Art von Fragen, ich habe versucht, nach einer Lösung für mein Problem zu suchen, aber konnte keine Anwendung finden.

Ich versuche, eine Klasse auf ein Element zu wechseln, indem Sie auf ein anderes Element klicken, um dies zu tun:

var myCanvas = document.querySelector('main'); 

function btOne() { 
    myCanvas.classList.toggle("one"); 
} 

ich die div i definiert eine Klasse und definiert die Funktion hinzufügen wollte.

<main></main> 
<div class="pickers"> 
    <div class="pick one" onclick="btOne()"></div> 
</div> 

Er sagt, die Funktion nicht definiert ist, wenn ich die div klicken. Ich kann nicht herausfinden, was damit nicht stimmt. Überprüfen Sie meine DEMO, um wirklich zu sehen, was vor sich geht.

Nebenbei bemerkt, ich versuche, keine Bibliotheken wie jQuery zu verwenden.

Answer 1

JSFiddle wird der Code in einem onload Rückruf Einwickeln der function btOne verursacht innerhalb der Funktion scoped werden und nicht implizit global scoped.

Wenn Sie btOne in globalen Bereich haben möchten, müssen Sie dies explizit zuweisen:

window.btOne = btOne; 

updated fiddle