Cannot set property className of #X which has only a getter

Question

The full error in the browser console in this

Uncaught TypeError: Cannot set property className of # which has only a getter

I am trying to put a class with Javascript everytime an action happens, this is the code

performClick (sideBet) {
    switch (sideBet) {
    case 'SuitEmUp':
        document.getElementById('SuitEmUp').className = 'animated shake';
        break;

    case 'PerfectPairs':
        document.getElementById('PerfectPairs').className = 'animated shake';
        break;

    default:
        console.log('Sorry, we are out of ' + sideBet + '.');
    }
}

and then changed that code to only this in my Reactjs app

performClick (sideBet) {
    this.refs[sideBet].getDOMNode().className = 'animated shake';
}

and the same error comes up...

HTML

<div ref="sideBetsLeft">

  <svg id="PerfectPairs" onClick={this.performClick.bind(this, 'PerfectPairs')}
       ref="PerfectPairs" className="side-bet" viewBox={viewBoxVal}></svg>

  <svg id="SuitEmUp" onClick={this.performClick.bind(this, 'SuitEmUp')}
       ref="SuitEmUp" className="side-bet" viewBox={viewBoxVal}></svg>

</div>

So, I don't know what is going on here. Any suggestions?

maybe something SVG related? What would happen if you had
instead of — hex13, Nov 04 '15 at 18:16
@hex13 if I remove the svg and put a div instead, I can't see anything in the view. — Non, Nov 04 '15 at 18:18
or what if you would set class attribute instead of className: ` this.refs[sideBet].getDOMNode().setAttribute('class', 'animated shake');`? — hex13, Nov 04 '15 at 18:18
@hex13 it works haha so weird. Post this as an answer so I can give you the best answer check. — Non, Nov 04 '15 at 18:20
btw. probably related: http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — hex13, Nov 04 '15 at 18:20

score 11 · Accepted Answer · edited Aug 23 '23 at 10:00

11

Try to set class attribute instead of setting property className:

this.refs[sideBet].getDOMNode().setAttribute('class', 'animated shake');

edited Aug 23 '23 at 10:00

Donald Duck

8,409
22
75
99

answered Nov 04 '15 at 18:22

hex13

500
5
11

Cannot set property className of #X which has only a getter

1 Answers1