Reading HTML data Attributes values with javascript

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, Apr 02 '23 at 07: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, Apr 02 '23 at 08:37

score -1 · Answer 1 · answered Apr 02 '23 at 07:42

-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 02 '23 at 07:42

vsam

533
3
23

Please do not answer typo-type questions that have a million dupes – mplungjan Apr 02 '23 at 07:58

Reading HTML data Attributes values with javascript

1 Answers1