Parsing HTML5 data-attribute to document.querySelector Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Parsing HTML5 data-attribute to document.querySelector without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

Answer

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”;

We are here to answer your question about Parsing HTML5 data-attribute to document.querySelector - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji