Newer
Older
2022-web / js / change_from_form.js
@taka taka on 12 Jul 2022 3 KB all
//CSVファイルを読み込む関数getCSV()の定義
function changetext(){
    var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
    req.open("get", "changetest.csv", true); // アクセスするファイルを指定
    req.send(null); // HTTPリクエストの発行
	
    // レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ	
    req.onload = function(){
	convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ
    }
}
 
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
    var result = []; // 最終的な二次元配列を入れるための配列
    var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
 
    // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
    result[0] = tmp[0].split(',');//IDやClassの名前を入れる
    //result[1] = tmp[1].split(',');//実際のコンテンツ内容を入れる
    console.log("CSV格納");

    putcontent(result);
}
 
function putcontent(csv_text){
    var contents = {};
    console.log("コンテンツ変更を開始");
	for(var i=0; i<csv_text[0].length;++i){
        let content = document.getElementById(csv_text[0][i]);
        if(content){
	        contents[csv_text[0][i]] = content.value;
        }
    console.log(contents);
    }
    if(true){
        document.getElementById("a").innerHTML = "<header class=\"site-header\"><div class=\"header-list\"><img src=\"image/view_cloud01_01.png\" alt=\"site-logo\" class=\"header-logo\">" + 
                "<ul><li class=\"menu\"><a class=\"menu1-url menu1\" href =\"" + contents["menu1-url"] + "\">" + contents["menu1"] + "</a></li><li class=\"menu\"><a class=\"menu2-url menu2\" href =\"" + contents["menu2-url"] + "\">" + contents["menu2"] + "</a></li><li class=\"menu\"><a class=\"menu3-url menu3\" href =\"" + contents["menu3-url"] + "\">" + contents["menu3"] + "</a></li><li class=\"menu\"><a class=\"menu4-url menu4\" href =\"" + contents["menu4-url"] + "\">" + contents["menu4"] + "</a></li></ul>" + 
                "</div></header><div class=\"main\"><div class=\"top-image\"><img src=\"image/sample3.jpg\" alt=\"top-image\" class=\"top-img\"><h2 class=\"img-text top-image-text\">" + contents["top-text"] + "</h2></div>" + 
                "<div class=\"about\"><h1 class=\"about-title1\">" + contents["main1-title1"] + "</h1><p class=\"about-text1\">" + contents["main1-text1"] + "</p></div></div>" + 
                "<footer class=\"footer\"><p>Copyright (C) " + contents["copyright"] + " . All Rights Reserved.</p></footer>";
    }

    let designSelect = document.getElementById('design');
    let num = designSelect.selectedIndex;
    if(designSelect){
        var css = document.getElementById("stylesheet");
        css.setAttribute("href", designSelect[num].value + ".css");
        console.log('選択されているのは ' + designSelect.value + ' です');
    }
}