HTMLでテーブルの名前をクリックした際にテキストボックスにその名前を表示するには

前提・実現したいこと

プログラミング歴一週間です。

HTMLでテーブルの名前をクリックした際
「選択したユーザ：」というテキストボックスに名前を表示させるようにしたい。
更に、別なユーザをクリックすれば前に選択されていた名前は消えて新しいユーザの名前が出るようにしたい。

またそのあとに選択されたユーザに応じて"nintendo+idの数字"というパスワードでログイン(ソースコードからバレてしまってもいい)
できるようにしたい。

発生している問題・エラーメッセージ

mario_bros.js:26 Uncaught TypeError: Cannot set property 'value' of undefined
    at myfunc2 (mario_bros.js:26)
    at HTMLTableRowElement.onclick (member.html:11)

該当のソースコード

HTML(member.html)

<!DOCTYPE html>
<html lang=ja>
<body>
<title>ログイン画面へようこそ</title>
<p>ログインするユーザを選択して下さい。</p>
<p>
<table border=1 id="a">
<tr>
<th>番号</th><th>名前</th><th>性別</th>
</tr>
<tr id="1" onmouseover="myfunc1(1)" onclick="myfunc2(1)">
<td>1</td><td>マリオ</td><td>男</td>
</tr>
<tr id="2" onmouseover="myfunc1(2)" onclick="myfunc2(2)">
<td>2</td><td>ルイージ</td><td>男</td>
</tr>
<tr id="3" onmouseover="myfunc1(3)" onclick="myfunc2(3)">
<td>3</td><td>ヨッシー</td><td>不明</td>
</tr>
<tr id="4" onmouseover="myfunc1(4)" onclick="myfunc2(4)">
<td>4</td><td>ピーチ</td><td>女</td>
</tr>
<tr id="5" onmouseover="myfunc1(5)" onclick="myfunc2(5)">
<td>5</td><td>ワリオ</td><td>男</td>
</tr>
<tr id="6" onmouseover="myfunc1(6)" onclick="myfunc2(6)">
<td>6</td><td>ワルイージ</td><td>男</td>
</tr>
<tr id="7" onmouseover="myfunc1(7)" onclick="myfunc2(7)">
<td>7</td><td>クッパ</td><td>男</td>
</tr>
<tr id="8" onmouseover="myfunc1(8)" onclick="myfunc2(8)">
<td>8</td><td>デイジー</td><td>女</td>
</tr>
</table>
</p>
<form name="form">
<p>
</form><label>選択したユーザ：<input type="text"  name="bread"></label></p>
<p><label>パスワード　　：<input type="text"></label></p>
<p><input type="button" value="ログイン" onclick="myfunc3()"></p>
</p>
</form>
<script src="mario_bros.js"></script>
</body>
</html>

JavaScript(mario_bros.js)

function myfunc1(idName){　
 for(var i=1; i<=20; i++ ){
       if(document.getElementById(i)　==　null){ //もし要素が存在しなかったら
           break;　//処理をやめる
       }else{
        document.getElementById(i).style.backgroundColor = "#fff";
       };
   } 
  document.getElementById(idName).style.backgroundColor="#cc99ff";
}

function myfunc2(idName){　
    for(var i=1; i<=20; i++ ){
          if(document.getElementById(i)　==　null){ 
              break;　
          }else{
           document.getElementById(i).style.backgroundColor = "#fff";
          };
      } ;
      document.getElementById(idName).style.backgroundColor="#cc99ff";
      var objTable = document.getElementById("a");
      var a= objTable.rows[idName].cells[1];
      var htmltd = a.innerHTML;
     form.bread.value=htmltd; //恐らくこの一行に問題あり。console.logでもalertで正しく動作する。
}

試したこと

最後の一行はconsole.logやalertを使えば問題なく動くのですが、
テキストボックス内に表示させるようにするにはどうすればよいでしょうか？

補足情報（FW/ツールのバージョンなど）

Win10
Visual Studio Codeで書きました。
何故CSSやjQueryを使わないのかという点については触れないようにお願いいたします。

m.ts10806

2019/07/10 00:43

結局JavaScriptで実現するのでしたら「CSSやjQueryを使わずに」という表現は不要かと思います。脱jQueryの流れも一定あるのでPure JavaScriptのみで対応しようということに是非を唱える人はあまり見ません。

m.ts10806

2019/07/10 00:45

ただ・・・せめてHTMLは構文守ってください。でないと動くJavaScriptもきちんと動かなくなることがあります。

moody_pavilion

2019/07/10 00:46

ありがとうございます。削除しておきます。

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

回答2件

ベストアンサー

HTMLがおかしいです。
下記の整形ツールで確認してみてください。

ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）

整形結果

html
1<!DOCTYPE html>
2<html lang=ja>
3  <body>
4    <title>ログイン画面へようこそ</title>
5    <p>ログインするユーザを選択して下さい。</p>
6    <p>
7      <table border=1 id="a">
8        <tr>
9          <th>番号</th>
10          <th>名前</th>
11          <th>性別</th>
12        </tr>
13        <tr id="1" onmouseover="myfunc1(1)" onclick="myfunc2(1)">
14          <td>1</td>
15          <td>マリオ</td>
16          <td>男</td>
17        </tr>
18        <tr id="2" onmouseover="myfunc1(2)" onclick="myfunc2(2)">
19          <td>2</td>
20          <td>ルイージ</td>
21          <td>男</td>
22        </tr>
23        <tr id="3" onmouseover="myfunc1(3)" onclick="myfunc2(3)">
24          <td>3</td>
25          <td>ヨッシー</td>
26          <td>不明</td>
27        </tr>
28        <tr id="4" onmouseover="myfunc1(4)" onclick="myfunc2(4)">
29          <td>4</td>
30          <td>ピーチ</td>
31          <td>女</td>
32        </tr>
33        <tr id="5" onmouseover="myfunc1(5)" onclick="myfunc2(5)">
34          <td>5</td>
35          <td>ワリオ</td>
36          <td>男</td>
37        </tr>
38        <tr id="6" onmouseover="myfunc1(6)" onclick="myfunc2(6)">
39          <td>6</td>
40          <td>ワルイージ</td>
41          <td>男</td>
42        </tr>
43        <tr id="7" onmouseover="myfunc1(7)" onclick="myfunc2(7)">
44          <td>7</td>
45          <td>クッパ</td>
46          <td>男</td>
47        </tr>
48        <tr id="8" onmouseover="myfunc1(8)" onclick="myfunc2(8)">
49          <td>8</td>
50          <td>デイジー</td>
51          <td>女</td>
52        </tr>
53      </table>
54      <form name="form">
55      <p>
56        </form>
57        <label>選択したユーザ：
58          <input type="text" name="bread">
59        </label>
60      </p>
61      <p>
62        <label>パスワード　　：
63          <input type="text">
64        </label>
65      </p>
66      <p>
67        <input type="button" value="ログイン" onclick="myfunc3()">
68      </p>
69    </p>
70    </form>
71    <script src="mario_bros.js"></script>
72  </body>
73</html>

こうするとおかしいところに気づけると思います。

それなりの数ありますが、今回のJavaScriptが動かない要因にと思われるところだけにフォーカスしてみます。

html
1
2      <form name="form">
3      <p>
4        </form>  ←閉じてる？！
5        <label>選択したユーザ：
6          <input type="text" name="bread">
7        </label>
8      </p>
9      <p>
10        <label>パスワード　　：
11          <input type="text">
12        </label>
13      </p>
14      <p>
15        <input type="button" value="ログイン" onclick="myfunc3()">
16      </p>
17    </p>
18    </form>
19

name=form内には<p>しかないということになっていますね。

もちろんこれを修正したからと想定通り動くとは限りませんが、
HTMLが正しくないとそのHTMLの要素を取得して処理を行うJavaScriptも想定通りに動かすことはできませんので。

※HTMLの構文チェックをしっかりしたいのでしたら下記もご利用ください。

Another HTML-lint

投稿2019/07/10 00:50

編集2019/07/10 00:54

m.ts10806

総合スコア80852

moody_pavilion

2019/07/10 00:56

ありがとうございます。 </form>が変な位置に来ていることに気付けませんでした。これを削除することにより解決しました！また、便利なツールのご紹介ありがとうございました。

m.ts10806

2019/07/10 00:58

毎回サイト開いて整形チェックするのも面倒かと思いますので、構文チェックやコードフォーマット機能のついたエディタをご利用ください。 EclipseなどのIDEは有用ですが、私がよく利用しているBracketsなどでも今回のケースだと充分気づけます。

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

値をセットしたいフォームにもIDを振って、document.getElementByIdを使うのが適当かと思います。

html
1<input type="text"  name="bread" id="bread">
2
3document.getElementById('bread').value = htmltd;

なお、id属性には数字始まりの値は適当ではありません（HTMLの規格上は認められていますが、CSSの方で認められない値となります）。英字で始まるものにしましょう。

投稿2019/07/10 00:44

maisumakun

総合スコア145199

moody_pavilion

2019/07/10 01:16

回答ありがとうございます。 id属性を英字始まりのものに変更しようと思うのですが、その際のJavaScriptにはどのように修正を加えればよろしいでしょうか？

maisumakun

2019/07/10 01:24

document.getElementById(i)で取得している部分について、設定したIDと同じもので参照できるようにする必要があります。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！