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

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

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

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


(過去ログ 173 を表示中)

[トピック内 7 記事 (1 - 7 表示)]  << 0 >>

■99369 / inTopicNo.1)  JavaScriptのデータ参照方法について(Chrome)
  
□投稿者/ Kyouta (1回)-(2022/03/24(Thu) 18:10:09)

分類:[JavaScript] 

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

引用返信 編集キー/
■99370 / inTopicNo.2)  Re[1]: JavaScriptのデータ参照方法について(Chrome)
□投稿者/ 魔界の仮面弁士 (3308回)-(2022/03/24(Thu) 19:08:50)
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"]);
引用返信 編集キー/
■99374 / inTopicNo.3)  Re[1]: JavaScriptのデータ参照方法について(Chrome)
□投稿者/ WebSurfer (2461回)-(2022/03/25(Fri) 09:59:48)
No99369 (Kyouta さん) に返信

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

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

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

という訳で、IE でも Chrome でも動くようにするには JavaScript のコードを全面的に書き換える他
なさそうです。
引用返信 編集キー/
■99375 / inTopicNo.4)  Re[1]: JavaScriptのデータ参照方法について(Chrome)
□投稿者/ 魔界の仮面弁士 (3309回)-(2022/03/25(Fri) 11:23:00)
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> タグが省略されたものとして解釈されることになります。

他にも色々おかしな点がありますが…本題から離れてしまうので。
引用返信 編集キー/
■99376 / inTopicNo.5)  Re[1]: JavaScriptのデータ参照方法について(Chrome)
□投稿者/ 古谷 (37回)-(2022/03/25(Fri) 13:44:32)
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);
}

引用返信 編集キー/
■99377 / inTopicNo.6)  Re[2]: JavaScriptのデータ参照方法について(Chrome)
□投稿者/ 魔界の仮面弁士 (3310回)-(2022/03/25(Fri) 15:19:45)
No99376 (古谷 さん) に返信
> querySelectorを使う方法もあるんですけどIEだとどうだったかなー未検証です
querySelector は IE9 以降のサポートになりますね。
IE8 でも限定的にサポートされていましたが、IE7 以下だと NG です。


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


引用返信 編集キー/
■99380 / inTopicNo.7)  Re[3]: JavaScriptのデータ参照方法について(Chrome)
□投稿者/ くま (183回)-(2022/03/26(Sat) 23:55:26)
どうしてもツッコミたいので
> <form method="POST" NAME="MAIN">
<form method="POST" name="MAIN">
<form method="POST" id="MAIN">
どっちかにしようよ...

引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

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

管理者用

- Child Tree -