I have some 3D shapes on a page (X3DOM) that I would like to identify when clicked with the mouse. My HTML looks like this :
<Transform translation='0 0 0'>
<shape id="Roger1" number="54 -15 -34" onclick="changeColor();">
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<sphere>radius='1' </sphere>
</shape>
</Transform>Then, in JavaScript, I have the corresponding function set up this way :
function changeColor() {
window.alert('clicked');
}This works great. But I don't see how I could recover the information contained in the "number" tag, number="54 -15 -34"? Any help is appreciated.
You can pass the element itself as a parameter to the function:
function changeColor(element) {
window.alert(element.getAttribute('number'));
}<Transform translation='0 0 0'>
<shape id="Roger1" number="54 -15 -34" onclick="changeColor(this);">
<appearance>
<material diffuseColor='1 0 0'></material>
</appearance>
<sphere>radius='1' </sphere>
</shape>
</Transform>