Getting custom HTML attribute with JS and using with "this"

Question

const allButtonsToStore = document.getElementsByClassName("button");
    let reason = [];
    for (let x=0; x < allButtonsToStore.length; x++) {
      allButtonsToStore[x].addEventListener("click", function(){
        reason[x] = this.textContent;
        console.log("reason" + [x] + ": " + reason[x]);
        reason[x] = this.value;
        console.log("reason" + [x] + ": " + reason[x]);
        reason[x] = this.data-spec;
        console.log("reason" + [x] + ": " + reason[x]);
      });
    }

    <div id="gamen" class="hidden">
       <button class='button' data-next="gamen1" data-parent="gamen" data-spec="ram" value="2GB">Lichte games</button>
        <button class='button' data-next="gamen1" data-parent="gamen" data-spec="videokaart" value="2GB">Middel games</button>
        <button class='button' data-next="gamen1" data-parent="gamen" data-spec="processor" value="i9">Zware games</button>
    </div>

With JS I'm getting all buttons and, for testing, I'm checking if I can get the attributes (I need the attributes and values later).

this.textContent; and reason[x] = this.value; are working fine. Only I can't seem to figure out how to get a custom attribute this.data-spec;

this.data-spec; gives ReferenceError: spec is not defined
this."data-spec"; and this."[data-spec]"; gives SyntaxError: Unexpected string

this.[data-spec]; and this.(data-spec); Gives an unexpected token error

@Akshay why did you comment instead of putting it as an answer? I won't be able to reward you with points now — number42
– number42, Commented Feb 13, 2020 at 11:43
No worries, the answer below is also helpful, consider accepting it. — Akshay
– Akshay, Commented Feb 13, 2020 at 11:46

Terry · Accepted Answer · 2020-02-13 11:50:28Z

Since it's a HTML5 data- attribute, you can actually retrieve its value using HTMLElement.dataset, i.e.

this.dataset.spec

See proof-of-concept example:

const allButtonsToStore = document.getElementsByClassName("button");
let reason = [];
for (let x=0; x < allButtonsToStore.length; x++) {
  allButtonsToStore[x].addEventListener("click", function(){
    reason[x] = this.textContent;
    console.log("reason" + x + ": " + reason[x]);
    reason[x] = this.value;
    console.log("reason" + x + ": " + reason[x]);
    reason[x] = this.dataset.spec;
    console.log("reason" + x + ": " + reason[x]);
  });
}

<div id="gamen" class="hidden">
   <button class='button' data-next="gamen1" data-parent="gamen" data-spec="ram" value="2GB">Lichte games</button>
    <button class='button' data-next="gamen1" data-parent="gamen" data-spec="videokaart" value="2GB">Middel games</button>
    <button class='button' data-next="gamen1" data-parent="gamen" data-spec="processor" value="i9">Zware games</button>
</div>

However, there's something that concerns me in your code, is that you're constantly overwriting reason[x]. If you're somehow using the array reason later, do note that you will only get the last value (i.e. the value of data-spec), and not the textContent or the value of the element.

If you're familiar with using ES6, your code can be further optimized:

const allButtonsToStore = document.querySelectorAll('.button');

allButtonsToStore.forEach((el, i) => {
  el.addEventListener('click', () => {
    console.log(`reason${i}: ${el.textContent}`);
    console.log(`reason${i}: ${el.value}`);
    console.log(`reason${i}: ${el.dataset.spec}`);
  });
});

<div id="gamen" class="hidden">
   <button class='button' data-next="gamen1" data-parent="gamen" data-spec="ram" value="2GB">Lichte games</button>
    <button class='button' data-next="gamen1" data-parent="gamen" data-spec="videokaart" value="2GB">Middel games</button>
    <button class='button' data-next="gamen1" data-parent="gamen" data-spec="processor" value="i9">Zware games</button>
</div>

I was indeed overwriting because I simply need to know if it's working or not. for future purposes I think I indeed need your improvements. Thank you very much for the extra effort! I need to wait 4 min before I can mark your answer.

user7184659 · Accepted Answer · 2020-02-13 11:56:06Z

1

There is a method getAttribute() for getting the attribute values. you need to use that method and specify the which attribute value you need to get.

For your code it should be like this this.getAttribute("data-spec");

If attribute does not exists this will return null or ""

answered Feb 13, 2020 at 11:56

user7184659

Collectives™ on Stack Overflow

Getting custom HTML attribute with JS and using with "this"

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related