C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[3]: JavaScriptのデータ参照方法について（Chrome）

分類:[JavaScript]　

クラシックASP内で、ページ内のデータを参照したいのですがうまくいきません。
下記コードで、リストからデータを選択しボタンをクリックするとJavaScriptを呼び出し、
データを参照したいのですが「function Msg」内のデータ参照で、
IE11ではどちらのalertも正常に動作するのですが、
Chromeでは２行目のalertの書き方はうまくいきません（NAMEを変数で指定し参照する方法）
※１行目のalertの書き方だとうまくいきます

IE11、ChromeのどちらでもNAMEを変数で指定し参照する方法を行いたいのですが、
分かる方いらっしゃいますでしょうか？
宜しくお願い致します。


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>テスト用ページ</title>

<SCRIPT language=JavaScript>
function Msg(){
	var nm;
	var dl;
	
	nm = "TEST1_" + document.all("MAIN").SUB.value;
	dl = "TEST2_" + document.all("MAIN").SUB.value;
	
	alert(document.all("MAIN").TEST1_M2.value);
	alert(document.all("MAIN")(nm).value);
}
</SCRIPT>
</head>

<body>

<center>
<table border="1">
    <tr>
        <td>
        <BR>
        <form method="POST" NAME="MAIN">
            <p align="center">
            <select name="SUB">
            <option value="M1">M1 M1_NM</option>
	    <option value="M2">M2 M2_NM</option>

	　　<input type="hidden" name="TEST1_M1" value="T1">
	　　<input type="hidden" name="TEST2_M1" value="T2">
	    <input type="hidden" name="TEST1_M2" value="T3">
	　　<input type="hidden" name="TEST2_M2" value="T4">

            </select><br>
            <input type="button" value="実行" onClick="Msg()"><br>
        </form>
        </td>
    </tr>
</table>
</center>
</body>

</html>

■No99369 (Kyouta さん) に返信
> クラシックASP内で、ページ内のデータを参照したいのですがうまくいきません。
静的な HTML + JavaScript 固有の話なので、ASP は実質的には関係無さそうですね。

alert(document.all.MAIN.TEST1_M2.value);
alert(document.all.MAIN[nm].value);
alert(document.all["MAIN"].TEST1_M2.value);
alert(document.all["MAIN"][nm].value);
alert(document.all["MAIN"].TEST1_M2.value);
alert(document["all"]["MAIN"][nm]["value"]);

■No99369 (Kyouta さん) に返信

JavaScript はブラウザ依存性か高いので、あるブラウザでは期待したように動くが他のブラウザでは
動かないことがあります。特に IE と他のブラウザではそれが顕著です。

また、document.all というのはそもそもが IE が実装して（かなり古い話）他のブラウザが追随して
実装したということですが、HTNL5 では非推奨になったそうです。

Document.all
https://developer.mozilla.org/ja/docs/Web/API/Document/all

という訳で、IE でも Chrome でも動くようにするには JavaScript のコードを全面的に書き換える他
なさそうです。

■No99369 (Kyouta さん) に返信
> IE11、ChromeのどちらでもNAMEを変数で指定し参照する方法を行いたいのですが、
document.all プロパティは既に非推奨です。

歴史的な事情もあって、例外的に唯一の falsy オブジェクトとして生き残ってはいたりもしますが、
既に過去の遺物であり、現状で使用すべきものではありません。
https://qiita.com/jkr_2255/items/f9b7218d7a2b54424c12
https://developer.mozilla.org/ja/docs/Web/API/Document/all

form 要素を取得したいなら、document.forms["MAIN"] を使うことができます。
この記法であれば、IE3.02 でも Chrome 99 でも動くかと思います。丸かっこではない点に注意。
form 配下のコントロールに対してアクセスしたいなら、elements プロパティ経由で
　document.forms["MAIN"].elements["TEST1_M1"].value
のように指定します。

あるいは form から辿らずに、name での要素指定のために
　document.getElementsByName("TEST1_M1")[0].value
のように指定することもできます。メンバー名が Elements と複数系になっていることからも
分かるように、このメソッドは複数のノードを返します。そのため、.length や [0] などを併用します。

name 属性ではなく id 属性を扱える HTML 構造だった場合には、
　document.getElementById("id値").value
も使えます。name と違って、id は一意性がある前提なので、こちらのメソッドは
複数形の Elements ではなく単数形の Element というスペルになります。
id は大文字小文字が区別される点にもご注意を。(今回の HTML には id 属性が無いですが)

ただ JavaScrtip 以前の問題として…提示されたサンプルは、
select タグの直下に input type="hidden" が置かれていますよね。
これは HTML 構造としてあまりにも出鱈目すぎます。

本来であれば、select の直下に配置できるのは
「Zero or more option, optgroup, and script-supporting elements.」であり、
ここに input タグが来ることは想定されていません。

そのため、Chrome 等で提示の HTML を読み込ませた場合には、
<input type="hidden" name="TEST1_M1" value="T1"> の直前に
</select> タグが省略されたものとして解釈されることになります。

他にも色々おかしな点がありますが…本題から離れてしまうので。

querySelectorを使う方法もあるんですけどIEだとどうだったかなー未検証です

function Msg() {
  var nm = "TEST1_" + document.querySelector("form[name='MAIN'] select[name='SUB']").value;
  var h = document.querySelector(`input[name=${nm}]`);
  alert(h.value);
}

■No99376 (古谷さん) に返信
> querySelectorを使う方法もあるんですけどIEだとどうだったかなー未検証です
querySelector は IE9 以降のサポートになりますね。
IE8 でも限定的にサポートされていましたが、IE7 以下だと NG です。

> var h = document.querySelector(`input[name=${nm}]`);
Internet Explorer はテンプレートリテラル文字列をサポートしていません。

どうしてもツッコミたいので
> <form method="POST" NAME="MAIN">
<form method="POST" name="MAIN">
<form method="POST" id="MAIN">
どっちかにしようよ...

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[3]: JavaScriptのデータ参照方法について（Chrome）

過去ログには書き込み不可