CODEWITHSUNDEEP
javascript
Roger Breton
Roger Breton

Reputation: 91

JavaScript onclick event retrieve attribute?

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.

Upvotes: 1

Views: 54

Answers (1)

Spectric
Spectric

Reputation: 31992

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>

Upvotes: 1

Related Questions