getElementsByNameで値を取れていない理由がわからないです。

〇やりたいこと
submitボタンを押下したときに、onsubmitによってjavascriptが実行されて
inputタグのname = "loginID"が、document.writeによって表示されるようにしたいです。

〇困っていること
loginIDの値が表示されません。
jsp画面でinputフォームに入力、もしくはあらかじめvalueに値をいれていても表示がされません。

エラーもでません。

アドバイスをお願いします。

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<%@ taglib uri = "http://struts.apache.org/tags-html" prefix = "html" %>
4<!DOCTYPE html>
5<html:html>
6	<head>
7		<meta charset="UTF-8">
8		<title>Insert title here</title>
9		<link rel = "stylesheet"  href = "http://localhost:8081/Attendance_Apli/CSS/AttendanceCSS.css">
10		<script type = "text/javascript">
11		function valueCheck(){
12			document.write("pass1");//表示される
13			var loginID =document.getElementsByName("loginID");
14			document.write("pass2");//表示される
15			document.write(loginID[0].value);//ここで表示がされない
16			return false;
17		}
18		</script>
19	</head>
20	<body>
21		<div id = "login_all">
22			<h1>ログイン</h1>
23			<br>
24			<p>ユーザーIDとパスワードを入力してください</p>
25			<html:form action = "/login" onsubmit = "return valueCheck()" >
26				ユーザーID：<html:text  property = "userID" name = "loginID" value = ""/> <br>
27				パスワード：<html:password property = "password" name = "loginPass" value = ""/><br>
28				<html:submit property = "login" value = "ログイン"/>
29			</html:form>
30		</div>
31	</body>
32</html:html>
33

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

回答3件

document.writeはろくなことがないので使わないほうがよいでしょう
getElementsByNameはIE系で挙動がおかしいようです

投稿2020/11/09 03:36

yambejp

総合スコア116724

yambejp

2020/11/09 03:37

一応この流れなら動いていると思います <input type="password" name = "loginID" value = "123"> <script> var loginID =document.getElementsByName("loginID"); console.log(loginID[0].value); </script>

Y.Mamoru

2020/11/09 04:10

ありがとうございます！ただ上記と同じようしても動かずでした。実行しているのはChromeで行っています。コンソールに一瞬だけ表示されるエラー文を見ると、property名がひっかかっているようでした。そこで <input type = "text" name = "loginID">に変更すると、IDに関しては正常に表示できました！同様に、 <input type = "password" name = "loginPass">を行うと、こちらは実行されません。パスワード属性だと動作が変わるのでしょうか。（今はまた一瞬だけ表示されるエラー文を読み取っていってます(><)）

yambejp

2020/11/09 04:18 編集

誤解があるかもしれないので念の為私の例示した5行だけ書いたhtmlを保存して確認するのですが確認処理はあっていますか？ name= "loginPass"が確認できないというのはちゃんと document.getElementsByName("loginPass"); で拾っていますか？

Y.Mamoru

2020/11/09 04:22

間違っているかもしれません。自分が行ったのは、自分が作った<input>タグと<script>タグの中身を、 yambejpさんが書いてくださったように書き換えて実行しています。

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

ベストアンサー

ページの描画完了後にdocument.writeを実行すると、その時点でページがリセットされてしまいます。結果、document.getElementsByName("loginID")で取るべきエレメントも消滅します。

特殊な場面を除けば、document.writeを使うこと自体が、現代のJavaScript環境では適当ではありません。

投稿2020/11/09 03:30

maisumakun

総合スコア146018

Y.Mamoru

2020/11/09 03:38

ありがとうございます！なるほど、そうなんですね。この指摘を受けて以下のように変えてみました。 <script type = "text/javascript"> function valueCheck(){ var loginID =document.getElementsByName("loginID"); alert(loginID[0].value); return false; } </script> 安直かもしれないですが、document.writeを全て消し、alertで表示できるようにしています。ただこれでも表示されません。（alertが実行されません） getElementsの段階から変える必要性があるのでしょうか。

maisumakun

2020/11/09 03:41

コンソールにエラーなどは表示されていませんか？

Y.Mamoru

2020/11/09 04:11

よくみるとコンソールに一瞬だけエラー文がでていました！ property名がひっかかっているようでしたので、 <input type = "text" name = "loginID">に変更すると、IDに関しては正常に表示できました！同様に、 <input type = "password" name = "loginPass">を行うと、こちらは実行されません。パスワード属性だと動作が変わるのでしょうか。（今はまた一瞬だけ表示されるエラー文を読み取っていってます(><)）

Y.Mamoru

2020/11/09 06:13

alartを使うことと、2つの値のnameを揃えることで解決できました！ありがとうございます！

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

パスワード属性だと動作が変わるのでしょうか。

※コメント内の流れから「type 属性の値が "passowrd" だと…」と解釈します
（表記するなら、CSSセレクター的に [type="password"]です）。

~~そのようです。~~ name値が異なるのが理由です。
昔話ですが、getElementsByName() は [type="radio"] / [type="checkbox"] で使っていました.

試しました（ CODEPEN getElementsByName() vs querySelectorAll() ）。

代替案は querySelectorAll() ですね。

javascript
1function valueCheck(){
2  var inputs = document.getElementsByName("loginID");
3
4  var wrapper = document.getElementById("login_all");
5  var inputs2 = wrapper.querySelectorAll("[name]");
6  console.log( inputs.length, inputs2.length ); // 1, 2
7  [...inputs2].forEach( inp => {
8     console.log( inp.value );
9  });
10  return false;
11}
12