<style> .heading { color: red; } .button { font-size: 18px; } .skyblue { background-color: skyblue; } </style> <h1 class="heading" data-mh="item1">Hello World</h1> <button class="button" id="item1">Click Here</button> <h1 class="heading" data-mh="item2">Hello World</h1> <button class="button" id="item2">Click Here</button> <h1 class="heading" data-mh="item3">Hello World</h1> <button class="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>Este código hace la tarea recorriendo cada botón y haciendo toda la configuración para los detectores de eventos y la comparación.
// 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; } }); }Aquí hay una demostración: https://jsfiddle.net/w3d0z8Ly/
revisa mi respuesta:-
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 class="heading" data-mh="item1">Hello World</h1><button class="button" id="item1" onClick="btnClick(this)">Click Here</button> <h1 class="heading" data-mh="item2">Hello World</h1> <button class="button" id="item2" onClick="btnClick(this)">Click Here</button> <h1 class="heading" data-mh="item3">Hello World</h1> <button class="button" id="item3" onClick="btnClick(this)">Click Here</button> <p id="demo"></p>Por favor, chequee esto
const buttons = document.querySelectorAll(".button"); const headings = document.querySelectorAll(".heading"); for (const button of buttons) { for (const heading of headings) { button.addEventListener("click", (event) => { const x = button.getAttribute("id"); const z = heading.getAttribute("data-mh"); if (x == z) { button.classList.toggle("skyblue"); document.getElementById("demo").innerHTML = x + " " + z; } }); } }