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 8 · Accepted Answer · answered Nov 04 '15 at 18:22

8

Try to set class attribute instead of setting property className:

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

answered Nov 04 '15 at 18:22

hex13

470
3
10

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

1 Answers1