JSの新機能：非常に基本的なelseステートメントが動作しない

Question

さて、私はリストアイテムのJSで基本的なトグル機能を作ろうとしています。これまでのところ、私はif/elseステートメントを途中で動作させましたが、私が理解できない問題は、なぜelseステートメントが動作しないのかということです。構文はうまく見えますし、ラインスルーを元に戻すことが取れていないという事実以外のエラーも見られません。あなたはspanがチェックされているかどうかを確認する必要はありません

<li><input type="checkbox" onClick="check('box4')"><span id="box4">Mustard</span></li> 

function check() { 
    var el = document.getElementById('box4'); 
    if (el.checked = true) { 
     el.style.textDecoration = "line-through"; 
    } else { 
     el.style.textDecoration = "none"; 
    } 
} 

Answer 1

、あなたはinputがチェックされているかどうかを確認します。関数への入力を変数として渡し、変数がJSでチェックされているかどうかを確認することができます。

あなたの比較では=が不足しています。 ==または===は、前者と後者を比較します。単一の=は前者を後者に設定します。

function check(el) { 
 
    var span = document.getElementById('box4'); 
 
    if (el.checked == true) { 
 
    span.style.textDecoration = "line-through"; 
 
    } else { 
 
    span.style.textDecoration = "none"; 
 
    } 
 
}

<li><input type="checkbox" onClick="check(this)"><span id="box4">Mustard</span></li>

Answer 2

if条件が間違っています。使用する===

Answer 3

比較のために==または===を使用する必要があります。最初のものは抽象的な比較であり、2つ目は厳密な比較で、変数のタイプもチェックします。

ブール変数を評価する場合は、if(el.checked)で簡単にチェックできます。

最後に、スパン値を評価しています。あなたは、入力チェックボックスにスパンからIDを変更することができます。

<li><input type="checkbox" onClick="check()" id="box4"><span>Mustard</span></li>

Answer 4

ザ・作業されていない/それ以外の場合は、==ない=を使用する必要があるため。

#box4要素がspanであるため、checkedプロパティがないため、残りのコードも機能しません。

checkedプロパティは、あなたが本当にそれかどうかを確認する必要はありませんブールあるので、それは

function check() { 
 
    var el = document.getElementById('box4'), 
 
     span = document.getElementById('box4text'); 
 
    if (el.checked == true) { 
 
     span.style.textDecoration = "line-through"; 
 
    } else { 
 
     span.style.textDecoration = "none"; 
 
    } 
 
}

<li><input id="box4" type="checkbox" onClick="check('box4')"><span id="box4text">Mustard</span></li>

（をチェックする場合は、調べるために、同様のチェックボックスにIDを与える必要があります真と等しい場合は、直接使用することができますif (el.checked)）

---

また、あなただけのCSSで同じことを達成することができ

:checked + #box4{ 
 
text-decoration:line-through; 
 
}

<ul> 
 
    <li> 
 
    <input type="checkbox"><span id="box4">Mustard</span> 
 
    </li> 
 
</ul>