Передача параметра с событием onclick

Question

Я работаю над проектом с вызовами API. По сути, мне нужно иметь возможность передавать параметр в функцию с помощью jQuery при нажатии определенной кнопки.

Я работаю над проектом, который вызывает API для отображения кнопок класса для пользователя.

Каждая кнопка будет сгенерирована на основе наличия classId, который вызывается в файле jQuery:

JQuery:

function getCourses() {
    $.ajax({
        url: apisource + "/courses",
        dataType: "json"
    }).done(function(data) {
        let dataLength = Object.keys(data).length;
        for (let i = 0; i < dataLength; i++) {
            courseId = data["courses"][i].id; //this is the important part
            nameOfClass = data["courses"][i].name;
            let classButton = ('<button type=\'button\' class=\'classButton\' onclick=\'javascript:getStudentsInCourses(' + courseId + ');\'>' + nameOfClass + '</button>'); 

            $('#classButtonContainer').append(classButton);
    }

}) 
}
getCourses();

function getStudentsInCourses(currentCourseId) {

    console.log("current course id: " + currentCourseId);

    $.ajax({
        url: apisource + "/course=" + currentCourseId + "/students",
        dataType: "json"
    }).done(function(data) {
        console.log("here are the students");
        console.log(data);
}}

Что я хочу сделать здесь, так это то, что когда пользователь нажимает кнопку класса, идентификатор курса для этой кнопки становится «currentCourseId» и может быть передан в getStudentsInCourses, чтобы он мог вызывать студентов для этого курса. Я искал в Интернете правильный способ передачи этой переменной, но до сих пор ни один метод не работал. У кого-нибудь есть указатели на то, как передать эту переменную?

Так должно быть что-то вроде этого: когда пользователь нажимает одну из кнопок classButton, идентификатор курса этой кнопки будет передан функции getStudentsInCourses как currentCourseId

Answer 1

Кажется, это работает для меня.Возможно, именно ваша courseId переменная вызывает проблему?Вы уверены, что это не тот же идентификатор?

courseId = data["courses"][i].id;

function getCourses() {
  for (let i = 0; i < 5; i++) {
    let classButton = ('<button type=\'button\' class=\'classButton\' onclick=\'javascript:getStudentsInCourses(' + i + ');\'>Test ' + i + '</button>');
    $('#classButtonContainer').append(classButton);
  }
}

getCourses();

function getStudentsInCourses(currentCourseId) {
  console.log("current course id: " + currentCourseId);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="classButtonContainer"></div>

Answer 2

В Jquery вы можете использовать событие click для выполнения логики. Не забудьте вызвать функцию до события щелчка ниже.

//your functions
$('.classButtons').on('click', function(){
   const id = $(this).attr('id');
   //now call your function with the id
   getStudentsInCourses(id);
});

Если у вас есть вопросы или неправильно поняли ваш запрос, дайте мне знать =)