77808


チェックボックスにチェックを入れると文字を隠すというコードを作成しています。  
選択肢数は変動するため、Javascriptのfor文でonclickの関数を登録しています。

下記のようなコードを作成したのですが、どのチェックボックスをクリックしても、IDがtxt3を指しています。（connecttext()のclonsole.logで確認）  
iの変更がすべてのonclickに適用されているみたいです。  
修正方法や回避策を教えていただきたいです。

[code]

    <div id="txt0">りんご</div>
    <input type="checkbox" id="0" value="on"><br>
    <div id="txt1">みかん</div>
    <input type="checkbox" id="1" value="on"><br>
    <div id="txt2">その他</div>
    <input type="checkbox" id="2" value="on"><br>
    
    <script>
    // onclickの関数を登録
    function mod_form(){
        for (var i=0; i<3; i++){
            document.getElementById(i).onclick = function(){connecttext("txt"+i, this.checked)};
        }
    };
    // ページ読み込み時に実行
    mod_form();
    
    function connecttext( textid, ischecked ) {
        console.log(textid);
        if( ischecked == true ) {
            // チェックが入っていたら有効化
            document.getElementById(textid).disabled = false;
        }
        else {
            // チェックが入っていなかったら無効化
            document.getElementById(textid).disabled = true;
        }
    }
    </script>
    
[/code]


CC BY-SA 4.0
2021-06-26T14:57:11.833
77807
2021-06-26T15:09:17.733
37419
question
javascript html
HTML内onclickの関数をscriptで変更したいが、引数が書き換わる


`onclick`に関数を登録するときに`connecttext`への引数を解決しておけば良いでしょう。

[code]

        for (var i=0; i<3; i++){
          const textid = "txt"+i;
          document.getElementById(i).onclick = function(){
            connecttext(textid, this.checked);
          };
        }
    
[/code]


CC BY-SA 4.0
2021-06-26T15:09:17.733
77808
2021-06-26T15:09:17.733
45045
77807
answer