<style>

    .heading {
        color: red;
    }
    
    .button {
        font-size: 18px;
    }
    
    .skyblue {
        background-color: skyblue;
    }
</style>

If <h1> tag's "data-mh" and <button> tag's id has similar attribute than if I click on the button the button background-color will change. And the attribute will print on the P tag. My code is working with first button but it's not working with the second or othersbuttons. /* how can do it by loop */

<h1  data-mh="item1">Hello World</h1>
<button  id="item1">Click Here</button>

<h1  data-mh="item2">Hello World</h1>
<button  id="item2">Click Here</button>

<h1  data-mh="item3">Hello World</h1>
<button  id="item3">Click Here</button>

<p id="demo"></p>
<!-- This Paragraph tag will print my attribute -->

<!-- HTML End -->

<script>
    var x = document.querySelector(".heading").getAttribute("data-mh"); // This variable is to get Attribute of "data-mh"
    var y = document.querySelector(".button"); // Button selection. By clicking this button I will get print my Attribute
    var z = y.getAttribute("id"); // Getting button id to compaire with "data-mh" attribute
    y.onclick = function() {
        //If X (ID) and Z (Attribute) matching then working this Condition
        if (x == z) {
            y.classList.toggle("skyblue");
            document.getElementById("demo").innerHTML = x " " z; // This line of code will print my Attribute on P tag
        }
    }
</script>

CodePudding user response：

This code does the task by looping over each button and doing all the setup for event listeners and comparision.

// select all the buttons
const buttons = document.querySelectorAll(".button");

// loop over each one
for(const button of buttons)
{
  // add an on click listener
    button.addEventListener("click", (event) => {
    // get the button ID
    const x = button.getAttribute("id");
    /// get the previous element's (the heading's) data-mh attribute
    const z = button.previousElementSibling.getAttribute("data-mh");
    // compare them
    if(x == z)
    {
      button.classList.toggle("skyblue");
      document.getElementById("demo").innerHTML = x " " z;
    }
  });
}

Here is a demo: https://jsfiddle.net/w3d0z8Ly/

CodePudding user response：

check my answer:-

var x = document.querySelectorAll(".heading"); // This variable is to get Attribute of "data-mh"
    var y = document.querySelectorAll(".button"); // Button selection. By clicking this button I will get print my Attribute
    // var z = y.getAttribute("id"); // Getting button id to compaire with "data-mh" attribute
    function btnClick(e) {
      for(var i = 0; i < x.length; i  ) {
        if(e.getAttribute("id") == x[i].getAttribute("data-mh"))  {
          document.getElementById("demo").innerHTML = x[i].getAttribute("data-mh");
        }
      }
      for(var j = 0; j < y.length; j  ) {
        y[j].classList.remove("skyblue");  
      }
      e.classList.add("skyblue");
    }
      

.heading {
        color: red;
    }
    
    .button {
        font-size: 18px;
    }
    
    .skyblue {
        background-color: skyblue;
    }

<h1  data-mh="item1">Hello World</h1><button  id="item1" onClick="btnClick(this)">Click Here</button>

<h1  data-mh="item2">Hello World</h1>
<button  id="item2" onClick="btnClick(this)">Click Here</button>

<h1  data-mh="item3">Hello World</h1>
<button  id="item3" onClick="btnClick(this)">Click Here</button>

<p id="demo"></p>

Please check this

CodePudding user response：

You need to use querySelectorAll to get all buttons with .button class then iterate through them. You also can look that my working example on codepen

const y = document.querySelectorAll(".button");

y.forEach((btn) => {
  const x = btn.previousElementSibling.getAttribute("data-mh");
  const z = btn.getAttribute("id");
  btn.onclick = function () {
    //If X (ID) and Z (Attribute) matching then working this Condition
    if (x === z) {
      btn.classList.toggle("skyblue");
      document.getElementById("demo").innerHTML = x   " "   z; // This line of code will print my Attribute on P tag
    }
  };
});