やりたい事

HTMLに入れたチェックボックスの内容で、JavaScriptの結果を変えたいです。

チェックボックスは「件数を表示する」で、望む結果は
・チェックあり：No.XX（何件目）+前半部分+後半部分
・チェックなし：前半部分+後半部分（冒頭に件数が入らない）
です。

#試したコード

JavaScript
1    var s = document.getElementById("ch").checked;

これだとfalseしか表示されず、falsefalse...と結果が繰り返し回数分続いてから、前半部分+後半部分の表示となってしまいました。
あといくつか試したのですが、コードを上書きしているため、何が悪かったのかも分かりません……。

#コード
if文以外は動くことを確認しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8" />
4<head>  <title>ランダム文章</title></head>
5<body>
6  ページ更新毎に十件ずつ、体言止めのよく分からない文が生成されます。
7  <script type="text/javascript" src="reload.js"></script>
8  <input type="button" value="更新" onclick="koshin()">← ボタンクリックで内容が変わります。
9
10<form data-persist="garlic" class="form1" >
11    <input type="checkbox"  class="ch" />
12    <label for="num">件数を表示する</label>
13</form>
14<hr>
15<script type="text/javascript" src="plus.js"></script>
16
17<script src="jquery-3.5.1.min.js"></script>
18<script src="garlic.js"></script>
19</body></html>

JavaScriptはplus.jsのみ。
ランダムのif文の中身は省略しています。

JavaScript
1var h='';
2var result=" "
3
4for (var i = 0; i < 10; i++) {
5
6//回数入れたい
7
8if (ch==true) {
9    h ="No."+ parseInt(i+1) +" ";
10}
11
12
13result=result+h;
14
15//前半ここから下
16var max  = 2;
17var rtn = Math.ceil(Math.random() * max);
18
19if(rtn ==1)  h='ありのままの';
20else if(rtn ==2)  h='上下する';
21
22//前半終了
23
24result=result+h;
25
26//ここから後半
27
28var max  = 2;
29var rtn = Math.ceil(Math.random() * max);
30
31if(rtn ==1)  h='化けの皮<br>';
32else if(rtn ==2)  h='マーメイド<br>';
33result=result+h;
34}
35
36document.write( result );
37

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

イベントを勉強しましょう。
getElementByIdが何をするものなのかを勉強しましょう。

多分入門書を買って体系的に勉強することが必要な段階です。

【イベントの紹介 - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events

【Document.getElementById() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

あと、document.writeを使わない要素の書き換え方を覚えましょう。20年以上前の書き方です。

投稿2020/10/30 04:56

kei344

総合スコア69400

kazumi_7

2020/11/13 13:05

遅くなってすみません。ご明察の通り、本当に勉強を始めたとも言い難いレベルです。イベントとgetElementByIdでチェックボックスの値が取れるようですね。まだリンク先の説明を読んでもさっぱり理解できなかったので、ネットのつまみ食いではなく、ちゃんと入門書から読んでみます。 document.writeは古いんですね……。色々調べたところ、insertAdjacentHTMLが良さそうだったので変更しました。ありがとうございます。

行動規範の内容に同意します