- ベストアンサー
ボタンの値をcsvファイルから取得した値へ変更
- ボタンの値をcsvファイルから取得した値へ変更できない問題について質問します。
- グローバル変数などの問題かもしれませんが、具体的な解決方法が分かりません。
- 読み込んだCSVファイルから値を取得し、ボタンの値に反映させたいのですが、反映されません。
- a_okwave33
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
予想の３７倍ぐらいエスパーしてみた。 <!DOCTYPE html> <title></title> <meta charset="utf-8"> <style> button { border: solid 2px red; border-radius: 20px; background-color: orange; padding: 20px; color: red; font-size: x-large; font-weight: bold; } .b { border: dashed 4px blue; border-radius: 0px; background: lightblue; } </style> <body> <button id="button1">0</button> <button id="button2">0</button> <button id="button3">0</button> <table id="output_csv" border="1"></table> <script> const ary2tbody=(a,b=document.createElement('tbody'))=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b); let result = []; async function getCSV (fn) {//Promise を返す let res = await fetch (fn); let txt = await res.text (); let rows = txt.split(/\r\n|\r|\n/g); let data = rows.map (r=> r.split(/\t|\,/g)); return data; //JSON.parse(txt); } async function demo () { let d = result = await getCSV ('tmp.csv'); let btns = document.querySelectorAll ('button[id^=button]'); let text = [d[5][2], d[6][2], d[7][2]]; btns.forEach ((e, i)=> e.textContent = text[i]); ary2tbody (result, document.querySelector('#output_csv'));//蛇足 } demo (); function handler (event) { let e = event.target; if (e.matches ('button[id^=button]')) e.classList.toggle ('b'); } document.addEventListener ('click', handler, false); </script>
その他の回答 (1)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
このソースにデータは含まれてないので判断できないので、 ↓この位置 〇 word11=result[5][2]; //ここが反映されない word22=result[6][2]; //ここが反映されない word33=result[7][2]; //ここが反映されない にブレークポイントを貼って変数の中身を見てみましょう。 それが、解決の道になると思います。 （というより、一発で解決できるとは思うけど）
補足
ご回答ありがとうございます。申し訳ありませんが、ご指摘いただいた箇所にブレークポイントを貼っても解決できませんでした...。
お礼
ありがとうございました！ お陰様で解決いたしました！