javascriptのチェックボックスのラインスルー

私は学校のプロジェクトをしようとしています。私はリストを作成しなければならず、チェックボックスをクリックしてからクロスさせなければならない。私はまだJavascriptを知らないし、私はまだそれを把握しようとしている。なぜ私はこれが動作していないのだろうかと思います。javascriptのチェックボックスのラインスルー

function crossout(id) { 
 
    var box = document.getElementById(id); 
 
    box.style = "text-decoration: line-through"; 
 
}

<body> 
 
    <h1>Hello World!</h1> 
 
    <h3>Shopping List</h3> 
 
    <p id="box1"> 
 
     <input type="checkbox" onclick="crossout"("box1") /> 
 
     Banana 
 
    </p> 
 
    <p id="box2"> 
 
     <input type="checkbox" onclick="crossout"("box2") /> 
 
     Noodles 
 
    </p> 
 
    <p id="box3"> 
 
     <input type="checkbox" onclick="crossout"("box3") /> 
 
     Eggs 
 
    </p> 
 

 
    <script src="app.js" charset="utf-8"></script> 
 
    </body>

出典

2017-03-23 Anonymous

[ 'HTMLElement.style']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style） – Andreas

あなたはあなたのチェックボックスにタイプミスがあります。

onclick="crossout"("box1")

をこれは次のようになります。

onclick="crossout('box1')"

あなたのオリジナルの方法は、唯一の"crossout"へonclickを設定します。代わりに、DOM内の厳密なイベントを結合する

出典

2017-03-23 16:05:20 krillgar

ありがとうございました。私の先生は昨日教えてくれました。私はあなたがその機能全体を引用するとは思わなかった。 –

ブラウザで見ると動作しません –

、私はあなたがして、すべてのcheckbox要素をキャッチArray#forEachを使用して、それを反復するために提案されてそれぞれがeventListenerをバインドします。 checkboxを確認する場合は、checkedクラスがその親にあるp要素に適用されます。

これはうまく見え、さらにうまく機能します。

var elems = document.getElementsByClassName('box'); 
 
    Array.from(elems).forEach(v => v.addEventListener('change', function(){ 
 
     this.parentNode.classList.toggle('checked'); 
 
    }));

.checked { 
 
    text-decoration: line-through; 
 
}

<h1>Hello World!</h1> 
 
<h3>Shopping List</h3> 
 
<p id="box1"> 
 
    <input type="checkbox" class='box'>Banana 
 
</p> 
 
<p id="box2"> 
 
    <input type="checkbox" class='box'>Noodles 
 
</p> 
 
<p id="box3"> 
 
    <input type="checkbox" class='box'>Eggs 
 
</p>

出典

2017-03-23 16:08:01

理想的には、私は同意します。しかし、学校のコースでJavaScriptを学ぶときの最初の割り当てとして、これは少し "高度な"ものです。 – krillgar

@krillgarあなたの解決策はより多くのOP expecationsに合っていますが、多分もっと進んだほうがいいかもしれません（（それは単なる私の特別な機能です*） –

私はrun code snippetを使いました。私はそれを保存しました。それから私はブラウザでプレビューを試みましたが、それはうまくいきませんでした。私はクロムを使用しています –

javascriptのチェックボックスのラインスルー

答えて

関連する問題