1

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.

Roger Breton
  • 81
  • 1
  • 9

1 Answers1

1

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>
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • 2
    There was a solution, here, under "https://stackoverflow.com/questions/4825295/onclick-to-get-the-id-of-the-clicked-button" which I only found after posting my question -- naturally? -- but I'll go along with your fine suggestion -- thank you so much! – Roger Breton Dec 09 '21 at 02:40