Need help with making Data Attributes code work

JavaScript
1

I’m trying to learn about implementing Data Attributes according to an article (link in code). In the code below, when you click on the button, it is supposed to gray out a couple of TA numbers and leave the other two FT numbers black. However, it is only graying out one number. I can’t figure out why.

<html>
<head>
  <meta charset="utf-8">
  <title>Testing Data Attributes</title>
  <style>

                .btn {
                  border: 1px solid black;
                  display: block;
                  margin: 5px;
                  text-align: center;
                  vertical-align: middle;
                  width: 100px;
                  }

                 .btn__text, p, a {
                  font-family: helvetica, sans serif; color: #000;
                  }
                 
                .btn--med {
                  padding: 5px;
                  }

  </style>
</head>
<!-- **from https://webdesignerhut.com/html5-custom-data-attribute/**
-->
<body>
                <h1>Sort Tools</h1>
                <p>Button shows which items are brand FT.</p>
                <button id="ft" class="btn btn__text btn--med">FT</button>
                <button id="refresh" class="btn btn__text btn--med">refresh</button>
            
                <p id="tool" data-brand="ta">TA 1495</p>
                <p id="tool" data-brand="ft">FT 1496</p>
                <p id="tool" data-brand="ta">TA 1497</p>
                <p id="tool" data-brand="ft">FT 1498</p>
</body>
<script>
                function buttonShowFt() {
                                var idtool = document.getElementById("tool");
                                                idtool.style.color = '#000'; // reset color to black
                                var databrand = idtool.dataset.brand;
                                for (var i=0; i<4; i++) {
                                                if (databrand === 'ta') {
                                                idtool.style.color = '#ccc';
                                                }
                                };
                }

               function buttonRefresh() {
                                var idtool = document.getElementById("tool");
                                                idtool.style.color = '#000'; // reset color to black
                }
 
                document.getElementById("ft").addEventListener('click', buttonShowFt);
                document.getElementById("refresh").addEventListener('click', buttonRefresh);
</script>
</html>
2

Hi @WebSteve, there are 2 problems with your code:

  • IDs must be unique, and consequently, getElementById() will only return the first match (note that it’s getElement, not getElements) – so you should give those elements a class="tool" instead
  • You’re looping from 0 to 4, but not using the index inside the loop but setting the color of the same element over and over

Try something like this instead:

var tools = document.querySelectorAll('.tool');
  
tools.forEach(function (tool) {
  if (tool.dataset.brand === 'ta') {
    tool.style.color = '#ccc'
  } else {
    tool.style.color = '#000'    	
  }
})
3

You could go even further and let CSS do the job (which additionally makes it easier to change the color setting) and drop the data attributes altogether.

CSS

ol.ta li.ft,
ol.tf li.ta {
    color: #ccc
}

HTML

<ol id="brands">
    <li class="ta">TA 1495</li>
    <li class="ft">FT 1496</li>
    <li class="ta">TA 1497</li>
    <li class="ft">FT 1498</li>
</ol>

<button id="ft" type="button">FT</button>

JS (example way to do it)

document.getElementById('ft').addEventListener('click', function (evt) {
    document.getElementById('brands').classList.add(this.id)
})

I leave the implementation of the reset button as exercise for the dear reader.

4

Yeah, looks like this was a poor reason for using data attributes. I wondered if the parts were in 10 different categories like a catalog has, then the specific category could be embedded as data attributes and called out that way. This was the precursor to that implementation. I won’t go further with this if usign data attributes was a bad idea.

Thanks for pointing out this solution.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.