Как Chrome и другие браузеры смогли инициализировать эту переменную JavaScript?

Question

Я работаю над корзиной покупок, в которой пользователю предлагается установить флажок, указывающий, что он согласен с условиями обслуживания, прежде чем он сможет "просмотреть заказ" и, наконец, совершить покупку.

Я должен выполнитьэто с помощью JavaScript, получив элемент, содержащий кнопки «просмотреть заказ» и «продолжить покупки» и изменив внутренний HTML-код, чтобы он был тем, что мне нужно.Я должен сделать это так, потому что корзина, которую я использую, не дает мне полный контроль над этими элементами в исходном коде корзины.

Вот код, который я изначально придумал, который работал на Chrome, Edgeи другие браузеры, но не IE.

var x = document.getElementById('CHECKOUT_LINKS');
x.innerHTML = '<div class="checkoutLinksBottom"><input id="tosBox" type="checkbox" name="tosBox">I agree to the <a href="http://example.com/terms-of-service/" target="_blank">Terms of Service</a><br><a href="javascript:history.go(-1);" class="continueButton">Continue Shopping</a><a href="javascript:void(0)" id="reviewOrderButton" class="continueButton" onclick="clicker();">Review Order</a></div>';

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#tosBox').addEventListener('change', changeHandler);
});


var checkbox = document.getElementById("tosBox");
checkbox.checked = true;
checkbox.checked = false;


function changeHandler() {
  if (!tosBox.checked)
    alert("You must agree to the Terms of Service");
}

function clicker() {
  if (!tosBox.checked)
    alert("You must agree to the Terms of Service");
  else { // Go to review order page
  }
}

Как вы можете видеть, внутренний HTML-код элемента CHECKOUT_LINKS изменяется на то, что мне нужно на лету, когда страница загружается.Основная задача - добавить элемент id="tosBox", затем зафиксировать щелчок по элементу id="reviewOrderButton" и отфильтровать его с помощью простых функций JS changeHandler() и clicker().

В инструментах разработчика IE консольсообщает 'tosBox' is undefined когда я нажимаю на элемент id="reviewOrderButton".Это имеет смысл, глядя на var checkbox = document.getElementById("tosBox"); созданная переменная называется checkbox, но переменная, которую я пытаюсь использовать позже, называется tosBox.Я просто изменил checkbox на tosBox, а затем все работало и в IE.

Что меня шокирует, так это то, что оригинальный код работал в Chrome и Edge.Как это работает?Стоит ли ожидать, что это сработает, а IE неисправен?