46日目。Javascriptで配列を作ってまとめて更新、メンテしやすくなりました。

品物のリストをずらっと表示しているホームページの改修をしています。
今後もしょっちゅう入れ替えがありそうなので

JavaScriptをつかってみました。
覚えたら使ってみたいじゃないですか！？

test.js

const Targets = [
    ["butaman.png", "横浜", "ぶたまんケーキ","2019/07/11 11:00","出荷済み"],
    ["takoyaki.png", "大阪", "たこやきケーキ","2019/07/11 14:00","製造中"],
    ・・・
    （中略）
    ・・・
    ["higuma.png", "札幌", "ひぐまケーキ","2019/07/12 11:00","スタンバイ"]
]

let str = "";
for (i=0; i<Targets.length; i++ ){
    Target = Targets[i]
    str = str  + `<div class='frame'>`;
    str = str  + `<img class='left'  src="${Target[0]}" >`;
    str = str  + `<div class='store'>${Target[1]}</div>`;
    str = str  + `<div class='prod'> ${Target[2]}</div>`;
    str = str  + `<div class='time'> ${Target[3]}</div>`;
    str = str  + `<img class='right' src="${Target[4]}">`;
    str = str  + `</div>`
}

const firstscript = function() { 
   document.getElementById('eid').innerHTML = str;
};

window.addEventListener("DOMContentLoaded", firstscript);

品目がたくさんあると更新が大変！
HTMLにずらっと書かれていたものを、配列にまとめて更新しやすくしてみました。
これをforでくるくる回してHTMLに返しています。

JavaScriptでHTMLを書き換えよう！

document.getElementByIdだけだと更新されなかったのでaddEventListenerで開いたときに起動させています。
【JavaScript入門】addEventListener()によるイベント処理の使い方！

最初はPHPでフォームを作ってと考えたのですが、サーバーのメンテが難しそうなので見送り。

次にCSVファイルを読み込む作戦を試したのですが、Chromeではセキュリティ上原則禁止。見送りました。

onclick()でコンテンツを変えられないかな？と思ったのですが、複数箇所のクリック画像がぜんぶ同時に更新される謎現象がわからなくて見送り。

Javascriptでローカルファイル(file://)を読み込んでみる

Chromeでcsvを開きたい　発生している問題・エラーメッセージ XMLHttpRequest cannot load file:///D:/test/Book1.csv. Cross origin requests ar

【JavaScript入門】すぐわかる！画像を切り替える方法

あきらめて一行ずつコツコツ更新を進めつつ
Progateを復習してみたら配列に変数をどんどん入れて、forでくるくる回す方法がちょうど出てきました。さっそく使ってみたらいい感じになりました。

この方法にたどりつくまでが、えらい大変でした。。。

所要時間
・PHPで試作・・・２時間
・CSV方式の試作・・・１時間
・onclickの試作・・・１時間
・Progate Javascript1,2の復習・・・１時間
・配列に格納、forで回す・・・１時間