前提・実現したいこと
HTML CSS JavaScript にてcsvデータをマスターにして入力した内容を紹介して,表示するプログラムを作成しています。
全体像としては,ページを読み込んだ時にcsvを読み込んで配列として持ちます。
その後HTMLのテキスト内容やチェックボックスの選択によって,配列から適合するデータの通し番号を表示またはリンクできる形したいと考えています。指定がない場合は,通し番号が全て表示されるようにしたいです。
その後,その通し番号をクリックまたは,リンクをクリックした際に,詳細情報を配列から取出し,指定場所に表示していきたいと思っています。
使用環境はIE11です。
エラーメッセージ 現状では,csvを読み込むところまではできましたが,通し番号を表示するがうまくで来ていない状態です。
該当のソースコード
JavaScripy
1{ 2 "use strict"; 3 4 window.addEventListener("load", function() {//ページが開いたときに 5 var result = document.getElementById("result"); 6 var description = document.getElementById("description"); 7 // result.style.display = "none"; 8 description.style.display = "none"; 9 10 var xhr = new XMLHttpRequest(); 11 var XMLhttpObject = null; 12 var csvArray = new Array(); 13 function getCSVFile() { 14 xhr.onload = function() { 15 createArray(xhr.responseText); 16 }; 17 18 xhr.open("get", "data.csv", true); 19 xhr.send(null); 20 } 21 getCSVFile(); 22 23 function createXMLHttpRequest() { 24 XMLhttpObject = new XMLHttpRequest(); 25 return XMLhttpObject; 26 } 27 28 function createArray(csvData) { 29 var tempArray = csvData.split("\n"); 30 var mainData = []; 31 for(var i = 0; i < tempArray.length;i++){ 32 csvArray[i] = tempArray[i].split(","); 33 // console.log(csvArray[i][0]); 34 } 35 } 36 }); 37 var btn = document.getElementById("btn");//ボタンクリック時の処理 38 btn.addEventListener("click", function() { 39 var x = document.getElementById("1").value;// 検索条件の吸い上げ 40 var y = document.getElementById("2").value; 41 var z = document.getElementById("3").value; 42 var a = document.getElementById("4").value; 43 var b = document.getElementById("5").value; 44 var c = document.getElementById("6").value; 45 //if( x === csvArray //データの中にx~cがあるときにcsvの0番目(通し番号を表示する) 構想のためコメント化しました) 46 47 }); 48} 49
試したこと
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー