custom attribute (data-) in HTML not working in JavaScript

Question

I have an select bar with a few options where I am trying to sort some things and I am also trying to implement, that if you click the option again then it will switch to ascending or descending order.

I have this HTML elements:

<select name="theme" id="sortSelect">
  <option> -
  </option>
  <option value="firstName" data-sort-direction="asc">First Name
  </option>
  <option value="lastName" data-sort-direction="asc">Last Name
  </option>
  <option value="house" data-sort-direction="asc">House
  </option>
</select>

I get the value in JavaScript by using this keyword, I have added an event listener to listen for a 'change' and that leads to a function and inside that function I'm getting the value like this: const selectedValue = this.value; that works totally fine but when I try to get the data-sort-direction='asc' in JavaScript like this: let sortDirection = this.dataset.sortDirection; then it returns undefined. What am I doing wrong here? help would be much appreciated!

edit: these are the 2 functions that I'm using:

function getSortedValues() {
  const selectedValue = this.value;
  let sortDirection = this.dataset.sortDirection;
  if (sortDirection === 'asc') {
    this.dataset.sortDirection = 'desc';
  } else {
    this.dataset.sortDirection = 'asc';
  }
  console.log(sortDirection);
  getSortedStudent(selectedValue, sortDirection);
}

function getSortedStudent(pressedValue, sortDirection) {
  let sortedStudents = [];

  let direction = 1;
  if (sortDirection === 'desc') {
    direction = -1;
  } else {
    sortDirection = 1;
  }

  sortedStudents = allStudents.sort((a, b) => {
    if (a[pressedValue] < b[pressedValue]) {
      return -1 * direction;
    } else {
      return 1 * direction;
    }
  });
  displayList(sortedStudents);
}

Unrelated to your problem, but some code review: Prefixing a function with the word get usually implies that it returns a value without modifying anything. Your get functions actually perform a change on the page when called and don't return anything, which is rather counter-intuitive. Also, all your variables could be constants. const direction = (sortDirection === 'desc') ? -1 : 1; — Domino
– Domino, Commented Sep 15, 2020 at 17:00
Thanks for comment @Domino, I am still a beginner so I am trying to write code that is as much understandable and readable as possible for me. I had no idea you could do that and I haven't seen this kind of code before either. — Why u do dis
– Why u do dis, Commented Sep 15, 2020 at 17:10
@Domino But thinking about it, now the code works and it sorts between ascended and descended but only if i first choose one option and then another option. So i cannot double click to change it. Should i use another type of event listener instead of change? or is it the fault of the select that works like this and you cant double click? the event listener 'click' is not working since it changes the values when the dropdown with the options appears and not when i click on the option itself. hmmm any ideas? — Why u do dis
– Why u do dis, Commented Sep 15, 2020 at 17:14

Domino · Accepted Answer · 2020-09-15 16:47:39Z

6

this.dataset is the data attributes of the <select>, not the <option>. You can get that via:

let sortDirection = this.options[this.selectedIndex].dataset.sortDirection;

Note, this may still be undefined, as your initial option doesn't have a data-sort-direction attribute.

edited Sep 15, 2020 at 16:47

Domino

6,8681 gold badge37 silver badges61 bronze badges

answered Sep 15, 2020 at 16:45

Tim Lewis

29.5k14 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Pavek · Accepted Answer · 2020-09-15 16:52:31Z

As mentioned in @Tim Lewis's answer, the select value attribute changes, but nothing else from <option> is carried over. There are a lot of ways to find the selected item with radios, checkbox, or dropdowns, but my preferred method is the :checked pseudo selector. Here's an example.

var select = document.querySelector('#sortSelect')
select.addEventListener('change', function(e) {
  var selectedOption = document.querySelector('option:checked')
  console.log(this.value, selectedOption.dataset);
})

<select name="theme" id="sortSelect">
  <option> -
  </option>
  <option value="firstName" data-sort-direction="asc">First Name
  </option>
  <option value="lastName" data-sort-direction="asc">Last Name
  </option>
  <option value="house" data-sort-direction="asc">House
  </option>
</select>

Collectives™ on Stack Overflow

custom attribute (data-) in HTML not working in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related