詳しい人求む！

javascript教えてください

解決済

質問者：わちょん
質問日時：2021/10/14 20:54
回答数：2件

const rows = [];

function go_forward() {

const row = [
pics_src[num],　　　　　　　　　//リンゴの画像
document.formname.a001.value,//赤い
document.formname.a002.value,//おいしそう
document.formname.a003.value,//フルーツ
document.formname.a004.value,//丸い
document.formname.a005.value,
].join(',');

rows.push(row);

document.formname.a001.value = '';//空白に戻す
document.formname.a002.value = '';
document.formname.a003.value = '';
document.formname.a004.value = '';
document.formname.a005.value = '';

}

htmlで5つフォームを作ってフォームの内容と写真の名前を
go_forward(ボタン)を押すとcsvに保存してフォーム内容を空白にするコードがあるのですが
jsで上記を書いても動かないです

これはhtmlの内容が悪いのか、上のコードが物足りないのかわからないです

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sukitaro
回答日時：2021/10/14 23:02

後続の質問が消えてしまっていますが、

やりたいことはたぶんこんな感じなんじゃないかと思います。

<!DOCTYPE html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習プログラム</title>
</head>
<body>
<h1>画像の特徴を説明してください</h1>
<img id="mypic" src="img/apple.jpg" width="400" height="300">
<form name="formname" id="id_form" action="">
<label for="a001">: 画像は</label>
<input type="text" name="a001" size="30" maxlenglabel="30" value="">
<label for="a001">です　　　　: </label>
<br />
<label for="a002">: 画像は</label>
<input type="text" name="a002" size="30" maxlenglabel="30" value="">
<label for="a002">を持っている: </label>
<br />
<label for="a003">: 画像は</label>
<input type="text" name="a003" size="30" maxlenglabel="30" value="">
<label for="a003">で出来ている: </label>
<br />
<label for="a004">: 画像は</label>
<input type="text" name="a004" size="30" maxlenglabel="30" value="">
<label for="a004">色です　　　: </label>
<br />
<label for="a005">: 画像は</label>
<input type="text" name="a005" size="30" maxlenglabel="30" value="">
<label for="a005">している　　: </label>
<br />
</form>
<input type="button" value="戻る" onclick="go(-1)">
<input type="button" value="進む" onclick="go(1)">
<br /><br />
<a id="createFile" href="#" onclick="dispText()">csv表示</a>
<table id="table">
<tr>
<td>ここに表示</td>
</tr>
</table>
<a id="download" href="#" download="test.csv" onclick="handleDownload()">csvダウンロード</a>

<script>
const pics_src = [
"apple.jpg",
"banana.jpg",
"grape.jpg",
"strawberry.jpg",
"melon.jpg"
],
IMG = document.getElementById("mypic");
let num = 0,
csv = [
['src','名前', '持っ', '出来', '色', 'して']
];

function handleDownload() {
let data = csv.map((record) => record.join(',')).join('\r\n'),
bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

let blob = new Blob([bom, data], { "type": "text/csv" });

if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, "test.csv");
// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
window.navigator.msSaveOrOpenBlob(blob, "test.csv");
} else {
document.getElementById("download").href = window.URL.createObjectURL(blob);
}
};

function dispText() {
let html = '';
csv.forEach((v)=>{
html += '<tr>';
v.forEach((u)=>{
html += '<td>';
html += u;
html += '</td>';
})
html += '</tr>';
});
document.getElementById('table').innerHTML = html;
}

function go(e) {
csv[num + 1] = [
pics_src[num],
document.formname.a001.value,
document.formname.a002.value,
document.formname.a003.value,
document.formname.a004.value,
document.formname.a005.value,
];
num = (num + e + pics_src.length) % pics_src.length;
IMG.src = './img/' + pics_src[num];

document.formname.a001.value = '';
document.formname.a002.value = '';
document.formname.a003.value = '';
document.formname.a004.value = '';
document.formname.a005.value = '';
}

</script>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ありがとうございます
このコードを参考にやってみようと思います

前の投稿は質問内容書いていなかったので運営？に消されたかもしれないです

通報する

お礼日時：2021/10/14 23:06

参考程度に

No.1

回答者： fujillin
回答日時：2021/10/14 21:32

こんばんは

こっち（↓）にも回答しておきましたのっで、まずはご覧になってください。
https://oshiete.goo.ne.jp/qa/12624183.html

HTMLがどうなっているのかわかりませんけれど、ご提示のスクリプトを実行しても（ちゃんと実行できていると仮定して）、テキストボックス（←なのか、はっきりしませんけれど）の値をカンマで連結した文字列をメモリ内に作成しているだけです。
ですので、どこにも保存はされていません。

メモリ内に一時記憶としてデータができるだけなので、見た目には何も変わりませんし、ブラウザを閉じればそのデータも消滅します。
（↑）の回答にも記しましたが、それをどこかに保存したければ、保存する処理が必要になります。
・サーバに保存する場合は、「サーバにデータを送信」する処理をブラウザ側で行い、サーバ側には「データを受け取って保存する」プログラムが必要になります。
・クライアントのPC内に保存する場合は、クッキーやlocalStorage、indexedDBなどを利用すれば可能です。
　この場合はjavascriptだけでも処理が可能です。
（ただし、当然のことですが、同一PCからでなければ読み出すことはできません）
https://developer.mozilla.org/ja/docs/Web/API/Wi …
https://developer.mozilla.org/ja/docs/Web/API/In …