HTML Data Usage Inline

by black strings

HTML

<button id="btn1" 
  data-hello="hello world" 
  data-info='{"id": 1, "name": "Submit", "active": true}' 
  onClick="onPress(this)">
  Button 1
</button>

<div id="response-msg" aria-hidden="true" onClick="">
  hidden text
</div>

CSS

#response-msg[area-hidde="false"] {
  display: block;
}
#response-msg[aria-hidden="true"] {
  display: none;
}

JavaScript

/**
Use data-* for storing custom values instead.

*/
function onPress(btn) {
  // Parse the stored JSON string into an object
  const btnData = JSON.parse(btn.getAttribute("data-info"));
  const btnDataHello = btn.getAttribute("data-hello");

  console.log(btnData.name); // Output: "Submit"
  console.log(btnData.active); // Output: true
  
  toggleResponseMessage(btnDataHello);
  
}

// aria testing to do hide and show
function toggleResponseMessage(data) {
	const msg = document.getElementById("response-msg");
  let isHidden = JSON.parse(msg.getAttribute("aria-hidden")); // convert to boolean
  isHidden = !isHidden;
  msg.setAttribute("aria-hidden", isHidden);
  msg.textContent = data;
  //msg.innerHTML = data; // if using html tags with the string
}