ボタンの値をcsvファイルから取得した値へ変更
素人質問で申し訳ありません。
グローバル変数などの問題なのだと思うのですが、
具体的に何をすればいいのか分からなかったため質問させていただきました。
読み込んだCSVファイルから、値を取得し、その値を変数に代入し、ボタンの値に反映させたいのですが、反映されません。
word11=result[5][2]; //ここが反映されない
word22=result[6][2]; //ここが反映されない
word33=result[7][2]; //ここが反映されない
問題は上の部分かと思います。
ご教授いただければと思います。
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<html lang="ja">
<table id="output_csv"></table>
<script src="./script.js"></script>
<head>
<meta charset="utf-8">
<style>
button {
border: solid 2px red;
border-radius: 20px;
background-color: orange;
padding: 20px;
}
</style>
<button type="button" id="button1" onclick="func1()">
<font size="5" color="red"><b><div id="word1">0</div></b></font>
</button>
<button type="button2" id="button2" onclick="func2()">
<font size="5" color="red"><b><div id="word2">0</div></b></font>
</button></body>
<body>
<button type="button3" id="button3" onclick="func3()">
<font size="5" color="red"><b><div id="word3">0</div></b></font>
</button>
<script language="javascript" type="text/javascript">
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const button3 = document.getElementById("button3");
let flg = false;
const output_csv_el = document.querySelector('#output_csv');
let data_array = [];
let data_string = [];
let len
let word11=0;
let word22=0;
let word33=0;
result = [];
function getCSV(){
var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
req.open("get", "sample.csv", true); // アクセスするファイルを指定
req.send(null); // HTTPリクエストの発行
// レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ
req.onload = function(){
convertCSVtoArray(req.responseText,word11); // 渡されるのは読み込んだCSVデータ
}
}
// 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される
// 最終的な二次元配列を入れるための配列
var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
for(var i=0;i<tmp.length;++i){
result[i] = tmp[i].split(',');
}
word11=result[5][2]; //ここが反映されない
word22=result[6][2]; //ここが反映されない
word33=result[7][2]; //ここが反映されない
}
getCSV(); // CSV読み込み
const func1 = () => {
if (flg) {
button1.style.border = "solid 2px red";
button1.style.borderRadius = "20px";
button1.style.backgroundColor = "orange";
} else {
button1.style.border = "dashed 4px blue";
button1.style.borderRadius = "0px";
button1.style.backgroundColor = "lightblue";
}
flg = !flg;
}
const func2 = () => {
if (flg) {
button2.style.border = "solid 2px red";
button2.style.borderRadius = "20px";
button2.style.backgroundColor = "orange";
} else {
button2.style.border = "dashed 4px blue";
button2.style.borderRadius = "0px";
button2.style.backgroundColor = "lightblue";
}
flg = !flg;
}
const func3 = () => {
if (flg) {
button3.style.border = "solid 2px red";
button3.style.borderRadius = "20px";
button3.style.backgroundColor = "orange";
} else {
button3.style.border = "dashed 4px blue";
button3.style.borderRadius = "0px";
button3.style.backgroundColor = "lightblue";
}
flg = !flg;
}
document.getElementById("word1").innerHTML = word11;
document.getElementById("word2").innerHTML = word22;
document.getElementById("word3").innerHTML = word33;
</script>
</head>
</html>
お礼
^^; 私なぞは、日常茶飯事の事です。もちろん普段の生活においてもですが。;_;