Change the opacity of an A-Frame object made from GLTF with javascript

Questions
1

Hello! I’m trying to change the opacity of an A-Frame object on click.
I found that I can write a component like this:

AFRAME.registerComponent(“hideonclick”, {
init: function() {
this.el.addEventListener(“click”, function(e) {
e.target.setAttribute(‘material’, {opacity: 0.2});
});
}
});

And it works well for the primitive A-frame objects.

But how to achieve the same effect on object with gltf model?

2

This way worked for changing the opacity of an object gltf model:

function setOpacityOfGLTF(entity, opVal){
	var model = entity.object3D;
  // Traverse the model's children to find materials and modify opacity
  model.traverse(function (node) {
	if (node.isMesh) {
	  // Check if the node is a mesh with a material
	  var material = node.material;
	  if (material) {
		material.transparent = true; // Enable transparency
		material.opacity = opVal; // Set the desired opacity value
		material.needsUpdate = true; // Update the material
	  }
	}
  });
  //to keep it working for the primitives as well
	entity.setAttribute('material', {opacity: opVal});
}