JavaScriptを用いたHTMLでリンク先が無題になる

前提・実現したいこと

URL、Openボタン、Closeボタンを表に貼りつけ、対応するOpenボタンを押すとそのURLの新しいwindowを開き、Closeボタンを押すと対応する新しく開いたwindowを閉じる。

まず、5つのウィンドウを指す配列変数subWindowを宣言する。そして，引数としてURLと表の何番目かを表すnを受け取って，横400px，縦600pxの大きさを持ち，URLを表示するアドレス欄とスクロールバーを含むウィンドウを生成する関数createNewWindow ("URL", n)を作る。また，引数として表のURLの何番目(n)かを受け取り，対応するウィンドウを閉じる関数closeWindow (n)を作る。

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

できた表のOpenボタンを押しても対応するリンク先に飛ぶことができず無題となる。
また、アドレス欄とスクロールバーも表示されていないように思う。

該当のソースコード

JavaScript
1<html>
2    <head>
3        <table border = 1>
4            <script type="text/javascript">
5            var url = new Array(5);
6            url[0] = 'https://www.youtube.com/'
7            url[1] = 'https://www.youtube.com/'
8            url[2] = 'https://www.youtube.com/'
9            url[3] = 'https://www.youtube.com/'
10            url[4] = 'https://www.youtube.com/'
11
12            var subWindow = new Array(5);
13            function createNewWindow(URL, n){
14                subWindow[n] = window.open(URL, '新しい写真', 'width = 400, height = 600, location(), scrollbars()');
15            }
16
17            function closewindow(n){
18                subWindow[n].close();
19            }
20
21            for(i = 0; i < 5; i++){
22                document.write('<tr>');
23                document.write('<th>' + url[i] + '</th>');
24                document.write('<th><button onclick="createNewWindow(url[i], i)">Open</button></th>');
25                document.write('<th><button onclick="closeWindow(i)">Close</button></th>');
26                document.write('</tr>');
27            }
28            </script>
29        </table>
30    </head>
31    <body>
32    </body>
33</html>

試したこと

クロテーションマークが原因と思い引数に''をつけたり、ダブルクォーテーション""にしたりしてみた。

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

わかりにくくてすいません。わかる方いらっしゃいましたら回答よろしくお願いします。

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

回答2件

ベストアンサー

引用符が入れ子になるとややこしいですよね。
あと、"closeWindow(i)"ではそのまんまただのiが入った文字列になってます。

JavaScript
1document.write('<th><button onclick="createNewWindow(' + "'" + url[i] + "'," + i + ');">Open</button></th>');
2document.write('<th><button onclick="closeWindow(' + i + ');">Close</button></th>');

それとfunction closewindowはfunction closeWindowですね。

投稿2021/06/06 05:54

itagagaki

総合スコア8402

peshi

2021/06/06 06:03

回答ありがとうございます。無事解決しました。 ' + i + 'という形にしないと数字として認識されないのですね...とても勉強になりました。本当にありがとうございます。

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

<head>タグの中に<table>タグとか書くのはおかしくないかな？ <head>タグ内は関数の宣言をして<body>タグの中でループを回して生成する。（<table>タグもここに書く）

html
1<html>
2    <head>
3
4        <script>
5            var subWindow = new Array(5);
6            var url = new Array(5);
7            url[0] = 'https://www.youtube.com/';
8            url[1] = 'https://www.youtube.com/';
9            url[2] = 'https://www.youtube.com/';
10            url[3] = 'https://www.youtube.com/';
11            url[4] = 'https://www.youtube.com/';
12
13            function createNewWindow(URL, n){
14                //optionの指定方法を変えました。全ブラウザで動作します。
15                subWindow[n] = window.open(URL, '新しい写真', 'width = 400, height = 600, menubar=no,toolbar=no,location=yes,resizable=yes,scrollbars=yes');
16            }
17
18            function closeWindow(n){
19                subWindow[n].close();
20            }
21        </script>
22
23    </head>
24    <body>
25        <table border = 1>
26            <script>
27                for(let i = 0; i < 5; i++) { //iが宣言無しで使われていたのでLETを追加
28                    document.write('<tr>');
29                    document.write('<th>' + url[i] + '</th>');
30                    document.write('<th><button onclick="createNewWindow(' + "'" + url[i] + "'," + i + ');">Open</button></th>');
31                    document.write('<th><button onclick="closeWindow(' + i + ');">Close</button></th>'); //closewindowではなくcloseWindow
32                    document.write('</tr>');
33                }
34            </script>
35        </table>
36    </body>
37</html>