Animated Knots key handling

checkArrowKeys.js

// document.onkeydown=checkArrowKeys;
document.addEventListener('keydown', checkArrowKeys);

function checkArrowKeys(e) {
    var evt = e ? e : event;
    var mykey = evt.keyCode;
    if ((mykey == 37) && (prevKnot > 1)) {
        showButtons(ButtonFadeDelay);
        elemQ = document.getElementById('Prelim'); // Get Identity
        elemQ.style.zIndex = -2; // Hide Labelled Image If Showing

        nextImage(prevKnot, prevKnot - 1); // Previous Image
        prevKnot--; // Decrease Count
        reset();
        e.preventDefault(); // inserted e.preventDefault() here
    }

    // Right Arrow Key (Up)
    if ((mykey == 39) && (prevKnot < MaxImages)) {
        showButtons(ButtonFadeDelay);
        elemQ = document.getElementById('Prelim'); // Get Identity
        elemQ.style.zIndex = -2; // Hide Labelled Image If Showing

        nextImage(prevKnot, prevKnot + 1); // Previous Image
        prevKnot++; // Decrease Count
        reset();
        e.preventDefault(); // inserted e.preventDefault() here
    }
    // Removed e.preventDefault() from here
}