加载页面后未在javascript中定义变量

Question

在我的HTML正文中，我有两个元素，一个具有id =“ cart”的div，其中包含具有id =“ cart-toggle”的按钮元素。

在我的JavaScript中，我这样做

if (document.readyState == "complete") {
  document.addEventListener("DOMContentLoaded", ready);
}

function ready() {
  var cart = document.getElementById("cart");
  var cart_toggle_btn = document.getElementById("cart-toggle");
}

现在，如果我打开控制台并键入cart，我可以看到我的cart元素，但是如果键入cart_toggle_btn，它将引发错误

未捕获的ReferenceError：未定义cart_toggle_btn 在：1：1

如果我在控制台中键入：var cart_toggle_btn = document.getElementById（“ cart-toggle”）;

有效...