Limiter code works in other websites but not ModX, please help! :)

I'm trying to run this code so I can have an image galley with limiters at the top. Each image will open an URL.

<!-- MAIN (Center website) -->
<h2>Programming Modules</h2>
<div id="myBtnContainer">
<div class="main">
<script type="text/javascript">// <![CDATA[
pagetitle = "[[*pagetitle]]";
// ]]></script>
<button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('preschool')"> Pre-school</button> <button class="btn" onclick="filterSelection('ozobots')"> Ozobots</button></div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column preschool">
<div class="content">
<h4><img style="border: 15px solid white;" title="Babies' First Books" src="babybook.jpg" alt="Babies' First Books" width="150" height="150" />  <img style="font-size: 1em; font-weight: normal; border: 15px solid white;" title="Another pre-school program" src="babybook.jpg" alt="Another pre-school program" width="150" height="150" /></h4>
</div>
</div>
<!-- END GRID --></div>
<!-- END MAIN --></div>
<script type="text/javascript">// <![CDATA[
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}

function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
// ]]></script>

It works on my computer when I save it as a .html file, but not when I use HTML to upload it to ModX. When I click on the limiter, nothing happens in ModX.

Maybe there's a javascript error visible in the browsers' developer console?