JavaScript & localStorage

###前提・実現したいこと
JavaScriptを使ってアンケートを作っています。localStorageを使って質問の答えを表示したいのですが、コードの書き方がよくわかりません。また、ページを訪れた回数の表示が必要なのと、アンケートの回答は一人一回のみにしたいです。よろしくおねがいします。
###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

<body> <form> <h2>Questionnaire</h2> <table border=2> <caption>Which Fruits do you like?</caption> <tr> <td><input type="radio" name="Fruits" id="fruits0" value=""> Apple </td> </tr> <tr> <td><input type="radio" name="Fruits" id="fruits1"value=""> Orange </td> </tr> <tr> <td><input type="radio" name="Fruits" id="fruits2"value=""> Others: <textarea name="comment" style="width:500px; height:20px;"></textarea> </td> </tr> </table> <script >DisplayVisits();</script> <form> <input type="button" value="GO!" id="countButton" onclick="disabled = true;" > <input type="button" value="Result" id="showResult" onclick="disabled = true;"> </form> <script> window.onload = function(){ document.getElementById("countButton"); var textArea = document.getElementsByName('Fruits')[0];

var value = localStorage.getItem('Fruits');
if(value){
Fruits.value = value;
}
}

function saving(){
var select = document.getElementsByName('Fruits')[0];
localStorage.setItem('Fruits', select.value);
}
</script>

<div id="counter"></div> <button id="reset">Reset</button> <script> var n = localStorage.getItem('on_load_counter'); if (n === null) { n = 0; } n++; localStorage.setItem("on_load_counter", n); document.getElementById('counter').innerHTML = "This page is visited " + n + " times."; function reset_counter() { localStorage.removeItem('on_load_counter'); } document.getElementById('reset').addEventListener('click', reset_counter); </script>

</body>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Lhankor_Mhy

2016/12/07 02:44

具体的にはどのような問題が発生していますか？こちらを参考に問題を抜き出してみてください。https://teratail.com/help/question-tips

退会済みユーザー

2016/12/07 02:54

アンケートの結果を表示したいのですが、このコードでは表示ができません。何が間違っているのかがわからないのです。よろしくお願いします。

toutou

2016/12/07 03:50

コードは質問編集をして<>みたいなのがあるので、それに入れてください。右の画面で灰色になったら成功です。DisplayVisitsが行方不明だったり、ボタンが使用禁止になってたり仕様がよくわかりません。

Lhankor_Mhy

2016/12/07 04:05

『このコードでは表示ができません』とありますが、具体的には何が起きていますか？　エラーメッセージなどをご提示ください。

Lhankor_Mhy

2016/12/07 04:07

質問者の現在の状況は https://teratail.com/help/question-tips#questionTips2 です。この状態ですと、学校の課題の丸投げのように見られます。

kei344

2016/12/07 04:25

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答2件

localStorageの機能の制約のため、一般的なアンケートのシステムを作ることは原理的に出来ません。

＜理由＞
localStorageは、ブラウザにデータを保存するための仕組みです。
localStorageのデータは、他のマシン（サーバや、他のユーザがブラウザを使っているPC等々）から読み書きすることが出来ません。

サーバ(S)と、アンケートのユーザが使っているマシンがあるとしましょう。
ブラウザはそれぞれのマシンで個別に動作します。
そして、JavaScriptのプログラムは、それぞれのブラウザで個別に動作します。

ある人がマシンAのブラウザaで、アンケートのフォームに記入したら、その内容をlocalstorageを使ってブラウザaに保存する事は可能です。
でも、そのデータにサーバがアクセスして、アンケート結果を取りまとめる事は出来ません。localstorageに、外部からのアクセスを提供する機能が無いからです。

サーバ側にCGIプログラムを設け、ブラウザはFormデータをサーバに送って、結果をもらう、という一般的な構成でシステムを作るのが素直ですし、大量の成功した前例があるので参考例が豊富です。

投稿2016/12/07 05:50

coco_bauer

総合スコア6921

ベストアンサー

自分で回答したアンケート結果を自分だけが確認すればよいという運用なのでしょうか？
あまり意味がないように思うのですが、ちがったらスミマセン

サーバー側に集積して分析する必要があるならサーバー側のプログラムやDBなどが
必要になると思います。状況を補足されるとよろしいかと思います。

投稿2016/12/07 03:31

yambejp

総合スコア118179

退会済みユーザー

2016/12/07 03:40

自分の回答を自分で見られれば大丈夫なんです。学校の課題で提出しなければなりません。。。

yambejp

2016/12/07 04:41

なるほど、とりあえずgoボタンを押したときにsavingをよぶことまたラジオボタンのからのvalueにAppleやOrangeをいれること otherだったときの処理をいれることで保存はできると思います呼び出しについてはresultボタンをおしたときに所定の箇所に呼び出した localstrageデータを表示してやることですまたdisableが設定されているのでresetボタンをどう活用するか仕様を固めてくださいなおページをおとずれた回数はページを開く度にlocalstarageを更新して表示してください

行動規範の内容に同意します

あなたの回答