window.openerのプロパティに変数の組み込み

当方、行き詰っておりまして皆様のお知恵をお借りしたく、質問失礼いたします。

質問内容

プロパティというのでしょうか？（間違ってたらすみません。）
window.openerのプロパティに変数を組み込みたいのですが、何か良い方法はないでしょうか？

該当のソースコードで言うと
window.opener.document.frm.ppp+no.value = document.getElementById("val").value;
で

ppp+no

の部分です。

console.logでは、正常に動作しております。
動作としては、
クエリーが?no=153&flag=1だった場合

開発ツールで確認したところ
153
1
と表示されております。

最終的には、ppp153といったような形にしたいです。

変数を使わず、
window.opener.document.frm.ppp153.value
といったようにするだけであれば、一つだけなら可能ですが153個とか複数にしたいので・・・

該当のソースコード

Javascript＆PHP

<?php
EOF;
$no = $_GET['no'];
$flag = $_GET['flag'];

print <<<EOF
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
</head>
<body>
        <h1>子ウィンドウ</h1>
 
                <form name="childfrm" action="" method="post">
                        <input type="text" name="sub_input" id="val" value="">
                        <input type="button" onclick="setValue()" value="OK">
                </form>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript">
    var no = {$no};
    var flag = {$flag};
    
        function setValue() {
            if (!window.opener || window.opener.closed){
                console.log("メインウインドウがありません。");
            }else{
                console.log(no);
                console.log(flag);
                window.opener.document.frm.ppp+no.value = document.getElementById("val").value;
                // window.close();
            }
        }
    </script>
 
</body>
</html>
EOF;
?>

試したこと

javascript
1   <script type="text/javascript">
2    var no = {$no};
3    var flag = {$flag};
4    
5        function setValue() {
6            if (!window.opener || window.opener.closed){
7                console.log("メインウインドウがありません。");
8            }else{
9                var p = { 'name':'ppp'+no};
10                var result = p['name'];
11
12                //console.log(no);
13                //console.log(flag);
14                console.log(result);
15
16                window.opener.document.frm.result.value = document.getElementById("val").value;
17                // window.close();
18            }
19        }
20    </script>
21

m.ts10806

2018/08/04 05:16

PHPから出力される情報はあくまで基本「文字列」となるのでクォーテーションで囲ってあげてJavaScript側で適切に変換してあげた方がいいかもしれません。

kirin311

2018/08/04 06:38

コメント、ありがとうございます。無事解決しました。

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

回答1件

ベストアンサー

pppは文字列ですか？変数ですか？

文字列なら

js
1window.opener.document.frm[`ppp${no}`].value = document.getElementById("val").value;

文字列と変数の連結はテンプレートリテラルで書いてます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings
['ppp' + no] でもかまいません。

変数なら

js
1window.opener.document.frm[ppp + no].value = document.getElementById("val").value;

これでどうでしょうか。
JSの場合は、プロパティにドット記法でもブラケット記法でもアクセスできます。
変数を使いたい場合はブラケット記法で書くしかないです。

詳しくは以下をご確認ください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors

投稿2018/08/04 04:35

spookybird

総合スコア1803

kirin311

2018/08/04 06:37

凄い助かります、文字列と変数2つの方法の提示ありがとうございます。 pppは、文字列でしたので文字列の方法を利用させていただいたところ無事解決しました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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