Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
①日替わりカレンダーを表示させたいです。 表示したいことは右のような表示
４月２５日 土曜日の表示を ４つの画像で表示したいです(日付のみ１列の日と２列の日があります）
表示したいことこちら →→ 4⃣２５土
画像pngを準備してあります。
左から月の画像 m1 m2 m3 m4 m5 m6 m7 m8 m9 m10 m11 m12 というpng画像 １２個（例 m4.png は４月の意味のpng画像）
２番目 日付の表示 0 1 2 3 4 5 6 7 8 9 というpng画像 ９個 準備してあります。
３番目 日付の表示 0 1 2 3 4 5 6 7 8 9 というpng画像 ９個 準備してあります。
４番目 曜日の表示のd0 d1 d2 d3 d4 d5 d6 というpng画像 ７個 準備してあります。
画像例添付します↓ （表示は4⃣２５土 横表示希望です）
ｍ４画像 
２画像 
５画像 
土画像 
相対パスは 同じ階層に画像がある為 ./ で問題ないですが画像が無いような
エラーメッセージが出ます。
いろいろいじりましたがどのが悪いかわかりませんので教えてください。
お願いします。
②エラーメッセージ↓
$%7BimgDir%7D$%7Bvalue1%7D.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
$%7BimgDir%7D$%7Bname%7D.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
③エラーがでるソース
コード
<html lang="ja"> <head> <meta charset="utf-8"> <title>日付を画像表示</title> </head> <body> <div id="images"></div> <div id="images2"></div> <script type="text/javascript"> <!-- const today = new Date() , month = today.getMonth() , date = today.getDate() , day = today.getDay() , // ファイル名,Alt用の曜日データ（） dayList = ['d0', 'd1', 'd2', 'd3', 'd4', 'd5', 'd6'] , // ファイル名,Alt用の月データ（） monthList = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12'] , // 画像フォルダまでのディレクトリを指定（デスクトップに作成 ファイル名 imege です） imgDir = './'; // 月・曜日の変換 const monthName = monthList[month]; const dayName = dayList[day]; // 日の分割 const dateArray = (date < 10) ? ['0' , date.toString()] // 10未満の場合、先に'0'をつける : date.toString().split(''); // 10以上の場合、splitで分割する // 個別に処理 // array = [ m, d0, d1, D ] の形 const array = [ monthName, dateArray, dayName ].flat(); // flat()したので、mapの入れ子がなくなった const imageObjectArray = array.map(value1=>{ const newImg = document.createElement('img'); //先に変換しておいたので、分岐がなくなった。 newImg.src = '${imgDir}${value1}.png'; newImg.alt = value1; return newImg; }); imageObjectArray.map(object => { document.getElementById('images').appendChild(object); }); // メソッドチェーンで処理（上と同じ処理をする） [ monthName, dateArray, dayName ] .flat() .map( name => { const newImg = document.createElement('img'); newImg.src = '${imgDir}${name}.png'; newImg.alt = name; return newImg; }) .map(object => { document.getElementById('images2').appendChild(object) }); //--> </script> </body> </html> コード
④同じ表現になりますがエラーが出ないソースコード
こちらは正常に実行されます。
これと同じ動きを ③でもしたいのです。
参考資料として
正常ソース↓
<html lang="ja"> <head> <meta charset="utf-8"> <title>正常動作 日付を画像で表示</title> <script type="text/javascript"> <!-- function calenderMddD() { //補助関数：<img>タグを生成する function createImageTag(prefix, number) { //画像ディレクトリのパスは各自の環境にあわせて設定 const imagePath = './'; const imageName = prefix + number.toString(); return '<img src="' + imagePath + imageName + '.png" alt="'+ imageName +'">' } //今日の日付取得 const now = new Date(); const month = now.getMonth() + 1; const date = now.getDate(); const day = now.getDay(); //各イメージタグを出力 document.write(createImageTag('m', month)); document.write(createImageTag('', Math.floor(date / 10))); document.write(createImageTag('', date % 10)); document.write(createImageTag('d', day)); } //--> </script> </head> <body> <script type="text/javascript"> <!-- calenderMddD(); //--> </script> <br> </body> </html> コード
よろしくお願いいます。
回答1件
0
ベストアンサー
引用符が違います。
js
1// newImg.src = '${imgDir}${value1}.png'; 2// ↓ ↓ 3 newImg.src = `${imgDir}${value1}.png`;
【テンプレート文字列 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings
投稿2020/04/25 07:43
総合スコア69608
あなたの回答
tips
プレビュー
