Search code examples
javascripthtmldomqueryselector

Parsing HTML5 data-attribute to document.querySelector

I have three HTML buttons with ids and classes. Two of them also hold data attributes.

The data attributes are for the element they should change the style display property for.

The basic idea is to show or hide paragraph elements. I am trying to reduce repetitive code by using querySelectors and for loops instead of having multiple event listeners. I am stuck at writing the function that starts on line 31 of the codepen. I have tried: document.querySelector(classbtns[i].getAttribute('data-value')).style.display = "inline"; and I am getting: TypeError: document.querySelector(...) is null

I have retained and commented out earlier code-blocks to help give you an idea of what I am trying to do.

Please see my code and link to the codepen below:

html:

 <p id="toy-pictures-latest" class="panel">Latest Toy Pictures</p><br>
         <p id="toy-pictures-greatest" class="panel">Greatest Toy Pictures</p>

Toy Pictures
<button type="button" id="btnlatest" data-value="toy-pictures-latest" class="buttons">Latest</button>
<button type="button" id="btngreatest" data-value="toy-pictures-greatest class="buttons">Greatest</button></details></li>
<button type="button" id="clear-btn">Clear</button>

css:

 #toy-pictures-latest.panel{
    display: inline;
}

#toy-pictures-greatest.panel{
        display: inline;
}

js:

/*function fgreatest() {
   document.getElementById('toy-pictures-greatest').style.display = "inline";
   }*/

//The following function clears the p elements in class "panel" by changing the display value in css

function clearall()
{
var panels = document.querySelectorAll('.panel'), i;  
console.log("exe");  
for (i = 0; i < panels.length; ++i) {
  panels[i].style.display = "none";
}

}  

//This is the previous version of the querySelector.
//It required a new function for each <p> element id 

/*const classbtns = document.querySelectorAll(".buttons");

 for (let i = 0; i < classbtns.length; i++) {
     classbtns[i].addEventListener("click", fgreatest);
 }*/

//This is the attempt to grab the name of the element
//from the html data value property and change the css //style display to inline

 const classbtns = document.querySelectorAll(".buttons");
 
  for (let i = 0; i < classbtns.length; i++) {
     classbtns[i].addEventListener("click", function() {
     
     document.querySelector(classbtns[i].getAttribute('data-value')).style.display = "inline";
      });
  }

document.getElementById('clear-btn').addEventListener("click", clearall);

codepen

Solution

  • I found two issues:

    1. In HTML, data-value tag for button "btngreatest" is missing end quote.

      <button type="button" id="btngreatest" data-value="toy-pictures-greatest class="buttons">

    2. Since you want to select panels by ID, you should prefix with '#'

      document.querySelector('#'+ classbtns[i].getAttribute('data-value')).style.display = "inline";