Reading HTML data Attributes values with javascript [duplicate]

Question

My Problem with this code is that i want to get the values of my data-Attributes and to know if it worked i use the alert function to see if it gets it. Now comes the Problem, each time i call a different data attribute in an else if condition, it shows the value null. Can someone explain how to do it and why it work that way.

function showDetails(value) {
  let atr = value.getAttribute("data-Number");
  let opr = value.getAttribute("data-clear");
  if (value = atr) {
    console.log("atr",atr);
  } else {
    console.log("opr",opr);
  }
}

<div class="col border border-6">
  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
    <button onclick="showDetails(this)" data-Number="1" type="button" class="btn btn-outline-dark">1</button>
    <button onclick="showDetails(this)" data-Number="2" type="button" class="btn btn-outline-dark">2</button>
    <button onclick="showDetails(this)" data-Number="3" type="button" class="btn btn-outline-dark">3</button>
    <button onclick="showDetails(this)" data-operator="1" type="button" class="btn btn-outline-dark">+</button>
  </div>
</div>

the issue is if (value = atr) { should be if (value === atr) { — mplungjan
– mplungjan, Commented Apr 2, 2023 at 7:42
This doesn`t seems to be working, instead is shown null even with the data-number. Did i Write it wrong, an example would definitly Help. — Damian Iturri
– Damian Iturri, Commented Apr 2, 2023 at 8:37

vsam · Accepted Answer · 2023-04-02 07:42:34Z

-1

To fix this issue, you should use the comparison operator (== or ===) in the if statement as follows:

function showDetails(value) {
  let atr = value.getAttribute("data-Number");
  let opr = value.getAttribute("data-operator");
  if (value.getAttribute("data-Number") != null) {
    alert(atr);
  } else {
    alert(opr);
  }
}

answered Apr 2, 2023 at 7:42

vsam

6647 silver badges28 bronze badges

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

1 Comment

mplungjan Over a year ago

Please do not answer typo-type questions that have a million dupes

Collectives™ on Stack Overflow

Reading HTML data Attributes values with javascript [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related