railsチュートリアルを進めていく中でjavascriptの知識が出てきたため、以下のコードを読みながら知識を深めていこうと思います。
.html
<div id="target">ターゲット</div>
<button onclick="actionToggle();">toggle実行</button>
.js
function actionToggle() {
var target = document.getElementById('target');
target.classList.toggle('apple');
}
.css
.apple {
color: red;
}
1. toggle実行ボタンを押したらactionToggle()メゾットを実行
<div id="target">ターゲット</div>
<button onclick="actionToggle();">toggle実行</button>
onclick="actionToggle();"
ボタンがクリックされると、actionToggle() というJavaScript関数が実行
2. id="target" を取得して変数に代入
function actionToggle() {
var target = document.getElementById('target');
→ document.getElementById('target')
HTMLの中から id属性が"target"の要素 を探して取得します。
取得した要素を変数targetに代入します。
（つまり<div id="target">ターゲット</div>のターゲットを取得）
3. .apple{}の部分のコードを適用したり外したりする
target.classList.toggle('apple');}
→ .classList.toggle('apple')
cssのコード.apple{}の部分を適用されていれば外す
されていなければ適用する
結果：
初回時 → toggle実行ボタンを押したら、ターゲットが赤く表示
appleクラスが付いているとき → ターゲットが赤く表示される
付いていないとき → 普通の色に戻る