旅行計画表のコードのウィンドウが表示されない

前提・実現したいこと

週間アスキー1268号のJavaScriptのコーナーで旅行計画表を作れるコードが掲載されていました。完成系はボタンを押すとウィンドウが表示され、そこで旅行日程を作れるものです。

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

上記のようにボタンを押せばウィンドウが出て、目的地、到着時刻、移動手段を
選択できるようになります。
しかし、見様見真似で打った結果、ボタンを押しても何も変化が起こらないです。

該当のソースコード

JavaScript
1<!DOCTYPE　html＞
2<html>
3<head>
4<meta charset="UTF-8">
5<title>旅行計画</title>
6<script>
7let plans = new Array();
8let index;
9
10const init  =（）＝＞ {
11  //目的地の追加・削除ボタンの無効化
12  document.getElementById("addButton").disabled = true;
13  document.getElementById("delButton").disabled = true;
14}
15
16const initPlan = () => {
17
18  plans =[];
19  index = 0;
20  document.getElementById("list").innerHTML ='';
21  document.getElementById("addButton").disabled = false;
22  document.getElementById("delButton").disabled =  false;
23}
24
25const openDialog = dialog => {
26  //ダイアログの表示
27  document.getElementById(dialog).style.display = "block";
28}
29
30const newPlan = set  => {
31  if(set) {
32  //出発地点、出発時刻をセット
33  initPlan();
34  const place = document.getElementById("place0").value;
35  const time = document.getElementById("time0").value;
36  setPlan(place,time,null);
37  //到着時刻のデフォルト値を変更
38  document.getElementById("time").style.display = "time";
39  }
40  //ダイアログを閉じる
41  document.getElementById("new").style.display ="none";
42
43const addPlan = set=> {
44    if(set){
45    //目的地、到着時刻、移動手段の追加
46    const place = document.getElementById("place").value;
47    const time = document.getElementById("time").value;
48    const way =  document.getElementById("way");
49    setPlan(place, time, way)
50    }
51    //ダイアログを閉じる
52    document.getElementById("add").style.display ="none";
53  }
54
55
56const setPlan = (place, time, way) => {
57    //移動表示の手段
58    if(way  != null){
59      const line =  document.createElement("div");
60      line.id = 'line_${index}';
61      line.className = "line";
62      line.innerHTML = way;
63      document.getElementById("list").appendChild(line);
64    }
65    //出発地点/目的地、出発時刻、到着時刻の表示
66    const plan = document.createElement("div");
67    plan.id = 'plan_{$index}';
68    plan.innerHTML = '<span>●</span>＄{time} ${place}'
69    document.getElementById("list").appendChild(plan);
70
71    //計画の追加
72    plans.push({"place":place, "time":time, "way":way});
73    //インデックスの更新
74    index++;
75
76  }
77
78  const deletePlan = () => {
79    //移動手段、目的地の削除
80    if(index > 1) {
81    index--;
82    const line = document.getElementById('line_${index}');
83    const plan  = document.getElementById('plan_${index}');
84    document.getElementById("list").removeChild(line);
85    document.getElementById("list").removeChild(plan);
86    plans.splice(index,1);
87    }
88}
89const loadPlan = files =>　{
90  //旅行計画データの読み込み
91  const reader = new FileReader();
92  //読み込み完了後の処理
93  reader. onlo = () => {
94    //JSONデータに変換、旅行計画をセット
95    const planJSON = JSON.parse(reader.result);
96    //旅行計画をセット
97    initPlan();
98    for (const plan of planJSON.plan) {
99      setPlan(plan.place,plan.time,plan.way);
100      }
101    };
102    //テキストファイルとして読み込み実行
103    reader.readAsText(fles[0]);
104 }
105const savePlan = () => {
106    //旅行計画をJSONデータ→テキスト→BLOBへ変換
107    const planJSON = {"plan":plans};
108    const planData = JSON.stringify(planJSON);
109    const blob =  new Blob([planData],{type:"text/plain"});
110    //名前をつけて保存（ダウンロード）
111    const filename = window.prompt("ファイル名を入力してください","plan.json");
112    if (filename != null) {
113      if(window.navigator.msSaveBlob){
114        //msSaveBlobを使用できるブラウザー
115        window.navigator.msSaveBlob(blob, filename);
116      } else {
117        const a = document.createElement("a");
118        a.href = URL.createObjectURL(blob);
119        a.download = filename;
120        document.body.appendChild(a);
121        a.click();
122        document.body.removeChild(a);
123        }
124      }
125    }
126
127</script>
128<style>
129  @media print{
130      input {display:  none;}
131    }
132 #line{
133      padding-left:  10px;
134      margin-left: 9px;
135      height: 60px
136      line-height: 60px;
137      border-left: 2px solid #0000CC;
138    }
139
140#list span{
141      color: #0000CC;
142      font-size: 20px
143    }
144dialog {display: none;}
145</style>
146</head>
147<body onload="init()">
148<p>旅行計画</p>
149<input type ="button" value="新規作成"  onclick="openDialog('new')">
150<input type ="file" accept=".json" onchange="loadPlan(this.files)">
151<input type ="button" value ="保存"　onclick="savePlan()">
152<input type ="button" value= "印刷" onclick="window.print()">
153<hr>
154<dialog id="new">
155    出発地点、出発時刻を入力してください。<hr>
156    出発地点:<input type="text" id="place0" size="50"><br>
157    出発時刻:<input type="time" id="time0" value="07:00"><hr>
158    <input type="button" value="登録"　onclick="newPlan(true)">
159    <input type="button" value="キャンセル"　onclick=newPlan(false)">
160</dialog>
161<dialog id="add">
162    目的地、到着時刻、移動手段を入力してください<hr>
163    目的地:<input type ="text" id="place" size="50"><br>
164    到着時間:<input type="time" id="time"><br>
165    移動手段:<select id="way">
166    <option value="徒歩”>徒歩</option>
167    <option value="自動車">自動車</option>
168    <option value="バス">バス</option>
169    <option value="電車">電車</option>
170    <option value="飛行機">飛行機</option>
171    </select><hr>
172    <input type="button" value="登録" onclick="addPlan(true)">
173    <input type="button" value="キャンセル"　onclick="addPlan(false)">
174</dialog>
175<div id="list"></div>
176<input type="button" id="addButton" value="目的地の追加"
177onclick="openDialog('add')">
178<input type="button"id="delButton" value="目的地の削除"
179onclick="deletePlan()">
180</div>
181</body>
182</html>
183

試したこと

雑誌に掲載されているものを何度も見返してみたつもりです

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

ここにより詳細な情報を記載してください。

m.ts10806

2020/03/31 05:31

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 えっと、つまるところ、このコードが中で何をしているか全く何も把握せずに質問しているということですか？

yambejp

2020/03/31 05:31

きちんとマークダウンしなと先頭のシャープ記号は見出しになっちゃいます。どこかソースが上げられるサイトにアップした方がよいかも

hoshi-takanori

2020/03/31 07:16

頑張って打ち込んだのでしょうね。・全角スペースがたくさんあります。(検索・置換してください。) ・const init =（）＝＞ { の（）＝＞が全角です。(10行目) ・newPlan の閉じ括弧 } がありません。(42行目) ・CSS の height: 60px の後ろに ; が必要です。(136行目) ・onclick=newPlan(false)" の newPlan の前に " が必要です。(161行目) ・value="徒歩” の徒歩の後ろの " が ” になってます。(168行目) 行番号は多少ずれてるかも。

FiroProchainezo

2020/03/31 07:22

> 某雑誌の週刊コーナー一般的に売られているものではないのでしょうか？(某雑誌と伏せる必要がある？) 出版社のHPに行けばソースが置いてあるかもしれませんよ。

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

回答1件

ベストアンサー

皆様方、改めてコメントありがとうございました。今回、よくサイトの説明を読まず、安易な質問をしてしまったことを反省しています。Hoshi-takanoriさんのコメントを元に一度WORDにコードを貼り付け、検索機能を使い全角をまとめて半角に直すなど修正したところ、無事に作動しました。今後はしっかり、基礎からJava Scriptを勉強して、わからないところがあれば質問させていただく形にいたします。

投稿2020/03/31 19:02

退会済みユーザー

総合スコア0