How to get the ID of a tag in JavaScript

Question

So I'm making a website where an user can add interests to their profile page. On the profile page I printed all the interests (tags) from the database. Now I'm trying to make an onclick function so when the user clicks on the a tag moves to the mytags and that works. But I also want to save the user_id and interest_id into the my junction table called gebruiker_interesses.

(Inside adminData[i] theres all the data inside the interesses table. My interesses table looks like this:

PK: ID_INTERESSE
    INTERESSE

So this is my function to print all the tags (interests)

   function interessesPrinten() {
        var query = "SELECT * FROM interesses";
        var adminData = Array();

        databaseManager
            .query(query)
            .done(function (data) {
                console.log(data.length);

                var ul = profielView.find('.tags');

                for (var i = 0; i < data.length; i++) {
                    adminData[i] = data[i];
                }

                for (var i = 0; i < adminData.length; i++) {
                    var li = $("<li>")
                        .addClass("tag")
                        .html(adminData[i].INTERESSE)
                        .on("click", function() {
                            addToMyTags($(this));
                        });

                    ul.append(li);
                }
            })
            .fail(function (err) {
                console.log(err);
            });
    }

As you can see inside the function I made an onclick function:

.on("click", function() {
                            addToMyTags($(this));
                        });

This is how I made my onclick function called addToMyTags:

 function addToMyTags(element) {
        var tag = element.text();
    console.log(tag);

      var interesse_ID = //?? I don't know how to get the id 
      var gebruiker_ID = [session.get('gebruiker_id')];
      console.log(gebruiker_ID);
      console.log(interesse_ID);
      databaseManager
          .query("INSERT INTO GEBRUIKER_INTERESSE (ID_INTERESSE, ID_GEBRUIKER)  VALUES (?)", [interesse_ID, gebruiker_ID])

    $(".mytags").append(element);
}

So I'm trying to get the id (ID_INTERESSE of the (Var) tag I clicked on so I can excecute the query and insert data into my junction table called gebruiker_interesse but I don't know how to do it. Any kind of help is appreciated

score 1 · Accepted Answer · answered Dec 08 '18 at 14:41

In your initial loop, output an id to a data attribute:

  function interessesPrinten() {
    var query = "SELECT * FROM interesses";
    var adminData = Array();

    databaseManager
        .query(query)
        .done(function (data) {
            console.log(data.length);

            var ul = profielView.find('.tags');

            for (var i = 0; i < data.length; i++) {
                adminData[i] = data[i];
            }

            for (var i = 0; i < adminData.length; i++) {
                var li = $("<li>")
                    .addClass("tag")
                    .data('interesse_id', adminData[i].INTERESSE_ID)
                    .html(adminData[i].INTERESSE)
                    .on("click", function() {
                        addToMyTags($(this));
                    });

                ul.append(li);
            }
        })
        .fail(function (err) {
            console.log(err);
        });
}

...then access it later:

function addToMyTags(element) {
    var tag = element.text();
    console.log(tag);

    var interesse_ID = element.data('interesse_id'); // get the id 
    var gebruiker_ID = [session.get('gebruiker_id')];
    console.log(gebruiker_ID);
    console.log(interesse_ID);
    databaseManager.query("INSERT INTO GEBRUIKER_INTERESSE (ID_INTERESSE, ID_GEBRUIKER)  VALUES (?)", [interesse_ID, gebruiker_ID])

$(".mytags").append(element);
}

score 0 · Answer 2 · answered Dec 08 '18 at 14:40

0

You should probably store the "id" as a data attribute on the "li" and access it using this method: Getting data-* attribute for onclick event for an html element

answered Dec 08 '18 at 14:40

Keith Turkowski

751
7
11

How to get the ID of a tag in JavaScript

2 Answers2