Q&A
提示のHTMLではJavaScriptを読み込めていないのでそもそも動きませんが、どこに書いているのでしょう。
エラー文
GoogleのDeveloperツールでのエラー文はこちらです。
jsファイルの名前は、ch13-1.jsです。
Error
1ch13-1.js:19 Uncaught TypeError: Cannot read property 'rows' of null 2 at ChangeCell (ch13-1.js:19) 3 at ch13-1.js:8
実現したいこと
表の下部にあるボタンを押すと、表中の行要素を変更するプログラムを書きたい。
文字列や値は、乱数でランダムに決められます。
流れの例
| 行1 | 行2 | 行3 |
|---|---|---|
| 0 | - | 0 |
| 1 | -1 | -1 |
| 2 | +1 | 0 |
| 3 | +1 | 1 |
| 4 | +1 | 2 |
| 5 | -1 | 1 |
| 6 | -1 | 0 |
| 7 | +1 | 1 |
| 8 | -1 | 0 |
| 9 | -1 | -1 |
↓
ボタンクリック
↓
| 行1 | 行2 | 行3 |
|---|---|---|
| 0 | - | 0 |
| 1 | +1 | 1 |
| 2 | +1 | 2 |
| 3 | +1 | 3 |
| 4 | -1 | 2 |
| 5 | -1 | 1 |
| 6 | -1 | 0 |
| 7 | +1 | 1 |
| 8 | +1 | 2 |
| 9 | +1 | 3 |
各設定
実際の動作確認は、Googlechromeです。。
table要素のidは、”myTBL”です。
表下のボタンはinputで実装しています。idは”change”です。
行1は時間t、行2は0~9の乱数を取得し、1/2の確率で+1 or -1になるような加算値、
行3は初期値0から加算値を加減していった値です。
ソースコード
HTML(body部のみ)、jsファイルのソースコードを貼り付けます。
html
1<body> 2 <h1>1次元randomwalkの表</h1> 3 <table id="myTBL"> 4 <caption>1次元randomwalk</caption> 5 6 <tr> 7 <th>t</th> 8 <td>0</td> 9 <td>1</td> 10 <td>2</td> 11 <td>3</td> 12 <td>4</td> 13 <td>5</td> 14 <td>6</td> 15 <td>7</td> 16 <td>8</td> 17 <td>9</td> 18 </tr> 19 20 <tr> 21 <th>加算値</th> 22 <td>-</td> 23 <td>+1</td> 24 <td>-1</td> 25 <td>+1</td> 26 <td>+1</td> 27 <td>-1</td> 28 <td>-1</td> 29 <td>-1</td> 30 <td>-1</td> 31 <td>+1</td> 32 </tr> 33 34 <tr> 35 <th>y(t)</th> 36 <td>0</td> 37 <td>1</td> 38 <td>0</td> 39 <td>1</td> 40 <td>2</td> 41 <td>1</td> 42 <td>0</td> 43 <td>-1</td> 44 <td>-2</td> 45 <td>-1</td> 46 </tr> 47 </table> 48 <input type="submit" value="Change" id="change"> 49</body> 50</html>
Javascript
1//初期設定 2 3let myTBL = document.getElementById("myTBL"); 4 5//イベントハンドラ設定 6 7let chaCell = document.getElementById("change"); 8chaCell.onclick = ChangeCell(); 9 10let Rad = new Array(10); //加算値計算に用いる整数乱数配列 11let Add = new Array(10); //加算値用配列 12let yT = new Array(10); //y(t)計算用配列 13 14 15//テーブル内の加算値とy(t)を変える関数 16function ChangeCell(){ 17 for(let i=0;i<10;i++){ 18 19 myTBL.rows[1].cells[i].innerHTML = JudgeInt(); 20 myTBL.rows[2].cells[i].innerHTML = getyT(); 21 22 } 23} 24 25 26//加算値計算用関数 27//0～9の整数をランダムに取得し、0～4は+1、5～9は-1を値として返す 28//最初の加算値はないので文字列"-"としておく、Add[0]="-"; 29 30function JudgeInt(){ 31 Add[0] = "-" 32 for(let i = 1;i < 10;i++){ 33 Rad[i] = Math.floor(Math.random() * 10); //整数取得 34 35 if(Rad[i] < 5){ 36 Add[i] = 1; 37 return +1; 38 } 39 else{ 40 Add[i] = -1; 41 return -1; 42 } 43 } 44} 45 46//y(t)計算用関数 47//Add[]を参照し、yT配列をforループで求める。 48//yT配列は前配列の値を参照し、それに加算値配列を足して求める。 49function getyT(){ 50 for(let i = 1;i < 10;i++){ 51 52 yT[0] = 0; //初期値 53 54 yT[i] = yT[i-1] +Add[i]; 55 return yT[i]; 56 } 57} 58
チャレンジしたこと、考えたこと
まず、初期設定で、table要素をdocument.getElementById("myTBL")で取得し、
ChangeCell関数の
myTBL.rows[1].cells[i].innerHTML = JudgeInt();
で行2の左から、1つずつセルを参照し、数値を変えていく。
myTBL.rows[2].cells[i].innerHTML = getyT();
こちらも同様な感じです。
ですが、エラー文から、rows配列が宣言、定義されていないとのこと。
（同じくcells[]配列も宣言していないと警告されるかもです）
なので、初期設定部でrows配列を宣言すればよいのかな、と考えましたが、
その配列が表の要素と関係していないため、ダメだろうな。。。
と考えているうちに、15分経過したので、質問しました・・・。
質問ありがとうございます。
申し訳ありませんが、HTMLのhead部は省略してあります。
なお、head部ではJavaScriptを読み込むコードを書いていますので、読み込んでくれています。
回答1件
0
chaCell.onclick = ChangeCell();
上記箇所ですが、JavaScriptでメソッドに登録するときには()は必要ありません。
上記のように書かれている場合、onclickメソッドにChangeCellの関数を登録するのではなく、
ChangeCellが実行されてしまいます。
なので下記の通り修正すればボタン押下時に実行されるようになると思います。
chaCell.onclick = ChangeCell;
投稿2020/07/26 15:32
総合スコア36
あなたの回答
tips
プレビュー
