JS + JS = сломанный код?

Question

Когда я добавляю 2 разных javascript-кода в один и тот же документ, один из них перестает нормально работать; мой видовой экран должен следовать после нажатия на следующий вопрос. на данный момент это не так, и я понятия не имею, почему. Я проверил имена переменных и т. Д., И дубликатов нет.

Это произошло в прошлом, и я потерял некоторые функциональные возможности, я бы очень хотел, чтобы это объяснялось.

http://codepen.io/erayner/pen/mRrMVd (это мой последний код) http://codepen.io/erayner/pen/VPvLyR (это то, что он должен делать)

первый код

//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(); 
} 

второй код

//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

Причина заключается в следующем :

Когда ".ans WER»щелкают там выполняется этот код

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

Но когда„a[data-value]“нажата, а затем„.answer“будет нажата слишком. Из-за

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

раньше, чем

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

так первый код выполняется, но второй нет.

Нельзя использовать синтаксис .on('click',.... Намного лучше - addEventListener.

Позвольте добавить один .addEventListener на возможную огромную площадь, когда действия должны быть выполнены после нажатия. Синтаксис аналогичен следующему:

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