JS + JS = broken code?

Question

When I add 2 different javascript codes to the same document, one of them stops working properly; my viewport is meant to follow once the next question is clicked. at the moment it doesn't, and I have no idea why. I have checked variables names etc, and there are no duplicates.

This has happened in the past, and I lost some functionality, I would really like this explained.

http://codepen.io/erayner/pen/mRrMVd (this is my final code) http://codepen.io/erayner/pen/VPvLyR (this is what it should be doing)

1st code

//when you click on an answer, the next answer appears

$(() => {
    init();
});

function init() {
    numberSections();
    bindAnswerClick();
    showSection(0);
}

function numberSections() {
    $(".section").each((index, elem) => {
        $(elem).data("index", index);
        $(elem).attr("data-index", index);
    });
}

function bindAnswerClick() {
    $(".answer").on("click", (e) => {
        selectAnswer($(e.currentTarget));
    });
}

function selectAnswer($answer) {
    let $section = $answer.closest(".section");
    let nextIndex = parseInt($section.data("index")) + 1;

    $section.find(".answer").removeClass("highlight");
    $answer.addClass("highlight");

    showSection(nextIndex);
}

function showSection(index) {
    $(".section[data-index='" + index + "']").show();
}

2nd code

//variables for end answer

var finalAnswers = [];
var button = document.getElementById("button");
//add answer values together and find end URL for button

$(document).ready(function () {

    $("a[data-value]").on("click", function (e) {
        var value = $(this).attr('data-value');
        finalAnswers.push(value);
        e.preventDefault();
    });

    $(".Finalbutton").click(function () {
        var store = finalAnswers;
        var frequency = {}; // array of frequency.
        var max = 0; // holds the max frequency.
        var result; // holds the max frequency element.
        for (var v in store) {
            frequency[store[v]] = (frequency[store[v]] || 0) + 1; // increment  frequency.
            if (frequency[store[v]] > max) { // is this frequency > max so far ?
            max = frequency[store[v]]; // update max.
            result = store[v]; // update result.
            }
        }

    if (result == "A")
        button.setAttribute("href", "http://www.w3schools.com");
    if (result == "B")
        button.setAttribute("href", "http://dailydropcap.com/images/C-9.jpg");
    if (result == "C")
        button.setAttribute("href", "http://www.w3schools.com");
    });

});

Answer 1

The reason is the following:

When ".answer" is clicked there is executed this code

$(".answer").on("click", (e) => {
    selectAnswer($(e.currentTarget));
});

But when " a[data-value] " is clicked, then " .answer " is clicked too. Because of

$(".answer").on("click", (e) => {
    selectAnswer($(e.currentTarget));
});

is earlier than

$("a[data-value]").on("click", function (e) {
    var value = $(this).attr('data-value');
    finalAnswers.push(value);
    e.preventDefault();
});

so first code is executed, but second not.

You should not use .on('click',... syntax. Much better is addEventListener .

Let add one .addEventListener on possible huge area when actions should be done after click. Syntax is similar to the following:

area.addEventListener('click',function(e) {
    if( e.taget ... ){ action 1 } else if( e.target ... ) { action 2 }and so on.
}