Javascript else statement not working correctly

I'm creating a web page which has this piece of code in it:

<a id="toggle_border" onclick="if (document.getElementById('toggle_border').innerHTML='Extra border: ON') {document.getElementById('toggle_border').innerHTML='Extra border: OFF'; document.getElementById('picture').className='swthb'} else {document.getElementById('toggle_border').innerHTML='Extra border: ON'; document.getElementById('picture').className='swb'}">Extra border: ON</a>

basically what I have are two classes (swb and swthb) which respectively have a black border and a white border (which blends with the background of the page), a picture which has swb as the default class, and an tag with a piece of text which acts like a switch for turning on or off the border. Now, if I click the text the first time, the border gets "removed" and the text changes from "Extra border: ON" to "Extra border: OFF", like I excepted, but if I click it again, nothing happens. By taking a look in the Chrome dev tools, it turns out the text gets "changed" again to "Extra Border= OFF", while the class doesn't change at all. I've tried using

else if (document.getElementById('toggle_border').innerHTML='Extra border: OFF')

but the same happens. I've also tried changing the if statement to

if (document.getElementById('toggle_border').className='swb')

but this time, if I click it the second time, the class gets "changed" to swthb again, while the text doesn't change at all.

How do I solve this?