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の内容が悪いのか、上のコードが物足りないのかわからないです
No.2ベストアンサー
- 回答日時:
後続の質問が消えてしまっていますが、
やりたいことはたぶんこんな感じなんじゃないかと思います。
<!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>
ありがとうございます
このコードを参考にやってみようと思います
前の投稿は質問内容書いていなかったので運営?に消されたかもしれないです
No.1
- 回答日時:
こんばんは
こっち(↓)にも回答しておきましたのっで、まずはご覧になってください。
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 …
一時保存したcsvのデータはblobというものを使って保存しようかと思っています
後htmlの内容が70行くらいあるのですがお時間あればみてほしいです
https://oshiete.goo.ne.jp/qa/12624485.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Excel(エクセル) VBAの指示の内容 昨日こちらでご教示頂いたのですが初心者な為、一つ一つの指示が何をやっているのかわ 2 2022/10/25 18:08
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript Json のキーと値の出力の違いについて 2 2022/06/14 20:22
- Visual Basic(VBA) VBA処理追加 こちらでご教示頂いたのですが回答完了させてしまいましたのでこちらからまた質問させてく 2 2022/10/27 09:57
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
innerHTML内では改行は禁止?
-
javaScriptの変数をJavaの変数...
-
クリックさせたいが、click()が...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
受け取ったパラメータが文字化け
-
formのfileの値をhiddenでも持...
-
javascriptで作成されたテーブ...
-
ボタンをクリックして文字を置...
-
追加ボタンを押した際に ok ボ...
-
jQueryでshow/hideが上手く行か...
-
ボタンで配列に代入
-
onclickが動作しない
-
return trueとreturn falseの用...
-
value内に変数を入れたい
-
プルダウン 項目が多いので先頭...
-
【jQuery】input nameの文字列...
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JSのボタンを複数う使うには
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
開いた子ウィンドウにあるボタ...
-
BackSpaceしたい(QNo.2734284の...
-
VB.NETで<Input>タグ、<text...
-
オンクリックで現在時刻の取得→...
-
JQueryでfunctionに引数としてI...
-
複数のテキストボックスの値の...
-
onClickがinput type="image"だ...
-
クリック→テキストボックスに追加
-
Javascriptで'(シングルクォー...
-
テキストフィールド未入力の場...
おすすめ情報