JavaScript: クリック処理について (クリックする度に文字を入れ替えたい。）

Question

前提・実現したいこと

JavaScriptでクリック処理を実装しています。
[定休日]と[勤務日]をクリックする度に文字を入れ替えたいです。

発生している問題・エラーメッセージ

現状では、クリックすると定休日と表示させるところまで出来たのですが、クリックの度に文字を入れ替える事ができなくて困っています。

該当のソースコード

//monday clicked
document.getElementById("mon").onclick = function() {
  console.log(document.getElementById("mon").innerHTML = "定休日");
};

試したこと

if文で条件分岐すればいいのかなと思いつつもどうif文を書けばいいかが分からなくて困っています。

補足情報（FW/ツールのバージョンなど）

javascript

Answer 1

おそらく、何度クリックしても定休日と表示されるようになっています。

var txt = document.getElementById("mon").innerHTML
if (txt === '定休日') {
    document.getElementById("mon").innerHTML = "勤務日"
} else if(txt === '勤務日'){
    document.getElementById("mon").innerHTML = "定休日"
}

var txt = document.getElementById("mon").innerHTML
document.getElementById("mon").innerHTML = txt==='勤務日' ? '定休日' : '勤務日'

このようにしてみてはどうでしょうか。

Answer 2

document.getElementById( 'mon' ).addEventListener( 'click', function( event ) {
	var text = ( event.currentTarget.innerText === '定休日' ) ? '勤務日' : '定休日';
	event.currentTarget.innerText = text;
} );
```**動くサンプル：**[https://jsfiddle.net/175pownq/](https://jsfiddle.net/175pownq/)

---


【EventTarget.addEventListener() - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)

【event.currentTargetとevent.targetの違い – １日ひとつ、強くなる。】
[http://better-than-i-was-yesterday.com/difference-btween-dievent-target-and-event-currenttarget/](http://better-than-i-was-yesterday.com/difference-btween-dievent-target-and-event-currenttarget/)

【条件 (三項) 演算子 - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

Comments

[rails_ruby]

懇切にご教示していただきありがとうございます。三項演算子で使えばよかったんですね。
ずっと三項演算子以外の方法で考えていたので勉強になりました。