How to get html data from "this" object - Vanilla JavaScript

Question

I'm trying to redo a function that was working with jQuery using only vanilla js. I can't seem to figure out how to get the data I need from the this object. I need to get the value of the parentid data attribute but nothing I've tried has worked!

Within my function if I include

console.log(this);

I get the output:

<a href="javascript:;" data-parentid="1" data-groupingtype="2">Text Content</a>

So I know that the data I need is within the object. I'm aware of the getAttribute("AttributeName") function but I don't have access to it through the this object.

Here is how the function is set up.

const selectionList = document.querySelectorAll("#selectionList li a");
for (var i = 0; i < selectionList.length; i++) {
    selectionList[i].addEventListener("click", function () {
        document.querySelector("#selectionButton span:first-child").textContent = (this.textContent);
        console.log(this);
        selectedParentID = parseInt($(this).data("parentid")); //this is what I can't figure out how to replace
        selectedType = $(this).data("type"); //and this
    });
}

This is the jQuery function I'm trying to replace:

$("#selectionList li a").on("click", function () {
    $("#selectionButton span:first-child").text($(this).text());
    selectedParentID = parseInt($(this).data("parentid"));
    selectedType = $(this).data("groupingtype");
    if (selectedParentID && selectedType && selectedOtherType) {
        doSomething();
    }
});

The HTML:

<div id="selectionContainer" class="form-group">
                    <button id="selectionButton" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>Select Grouping</span>&nbsp;<span class="caret"></span></button>
                    <ul id="selectionList" class="dropdown-menu" role="menu">
                            <li><a href="javascript:;" data-parentid="11" data-type="1">Option 1</a></li>
                            <li><a href="javascript:;" data-parentid="11" data-type="2">Option 2</a></li>
                            <li><a href="javascript:;" data-parentid="11" data-type="3">Option 3</a></li>
                                <li class="divider"></li>
                            <li><a href="javascript:;" data-parentid="12" data-type="1">Alternate 1</a></li>
                            <li><a href="javascript:;" data-parentid="12" data-type="2">Alternate 2</a></li>
                            <li><a href="javascript:;" data-parentid="12" data-type="3">Alternate 3</a></li>
                    </ul>
                </div>

If someone could point me in the right direction I would really appreciate it!

score 1 · Answer 1 · answered Mar 18 '19 at 17:53

If you have an item, which has data-foo="bar" then you can get this attribute via

foo.getAttribute("data-foo")

The data() function is a jQuery function and will not work with Vanilla JS. Subsequently you will need to use

this.getAttribute("data-parentid")

brk · Answer 2 · 2019-03-18T18:28:54.210

Here are few changes you can do

Instead of doing

document.querySelector("#selectionButton span:first-child").textContent you can do

let getButtonSpan = document.getElementById('selectionButton').firstElementChild;

this will giive the first child inside this dom element with id selectionButton

You can use forEach though conventional for loop is equally good. Use the argument of forEach to get the anchor tag dom & add event listener to it. On click of it get the text by using innerHTML & set it to the first child of button.

Beside getAttribute you can also use dataset to retrive the data property from a dom.

In your code which is replacement of jquery you are using $(this).data("parentid") which is violating your objective

let getButtonSpan = document.getElementById('selectionButton').firstElementChild;
document.getElementById('selectionList').querySelectorAll('a').forEach(function(item) {
  item.addEventListener('click', function() {
    getButtonSpan.innerHTML = item.innerHTML;
    let selectedParentID = item.dataset.parentid;
    let selectedType = item.dataset.type;
    if (selectedParentID && selectedType) {
      doSomeThing(selectedParentID, selectedType);
    }
  })

})

function doSomeThing(a, b) {
  console.log(`selectedParentID : ${a} & selectedType :${b}`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selectionContainer" class="form-group">
  <button id="selectionButton" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       <span>Select Grouping</span>&nbsp;
       <span class="caret"></span>
  
  </button>
  <ul id="selectionList" class="dropdown-menu" role="menu">
    <li><a href="javascript:;" data-parentid="11" data-type="1">Option 1</a></li>
    <li><a href="javascript:;" data-parentid="11" data-type="2">Option 2</a></li>
    <li><a href="javascript:;" data-parentid="11" data-type="3">Option 3</a></li>
    <li class="divider"></li>
    <li><a href="javascript:;" data-parentid="12" data-type="1">Alternate 1</a></li>
    <li><a href="javascript:;" data-parentid="12" data-type="2">Alternate 2</a></li>
    <li><a href="javascript:;" data-parentid="12" data-type="3">Alternate 3</a></li>
  </ul>
</div>

How to get html data from "this" object - Vanilla JavaScript

2 Answers2