功能未定义Javascript（基本）

Question

很抱歉打扰这类问题，我试图寻找解决问题的方法，但找不到任何适用的问题。

我试图通过单击另一个元素来切换元素上的类，方法是这样做：

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

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

我定义了div我想要添加一个类并定义该函数。

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

它表示单击div时未定义该功能。 我似乎无法弄清楚它有什么问题。 检查我的DEMO，看看发生了什么。

另外，我试图不使用jQuery等库。

Answer 1

JSFiddle将您的代码包装在onload回调中，导致function btOne在功能范围内，并且不隐式全局范围。

如果您希望btOne在全局范围内可用，则需要明确指定它：

window.btOne = btOne;

updated fiddle