前回は投票ページの候補者を追加するためのフォームを作りました。
次はフォームに名前と年齢を入力して追加ボタンを押すことで、投票ページの候補として追加されるようにします。
この辺についても以前に記事にしていますので、それを参照してさらっと終わらせたいと思います。
html-css-javascript.hatenadiary.com
前回作成したフォームは以下。
<form id="addCandidateForm" action="#" method="post"> <label for="candidateName">候補者名:</label> <input type="text" id="candidateName" name="candidateName" placeholder="候補者" required> <label for="candidateAge">候補者年齢:</label> <input type="number" id="candidateAge" name="candidateAge" min="0" max="150" placeholder="年齢" required> <button type="submit">追加</button> </form>
まずはJavaScriptで、追加ボタンをクリックしたら候補者名（candidateName）と候補者の年齢（candidateAge)を取得するようにします。
で。
重要なことを忘れていました。
候補者とか投票数とかを示す場所がありませんでした。
これを記しておかないと、JavaScriptで操作することができません。
なので以下を付け足します。
<ul id="candidateList"></ul>
これでJavaScriptのほうでIDで取得することができるようになりました。
名前と年齢の取得
JavaScriptのファイル名は「candidateAdd.js」とでもしておきましょう。
要素の取得
document.getElementById('addCandidateForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('candidateName').value.trim(); const age = document.getElementById('candidateAge').value.trim(); const candidateList = document.getElementById('candidateList'); if (!name || !age) { alert('候補者名と年齢を入力してください。'); return; } console.log(name, age); });
送信ボタンを押してフォームのイベント発生ですから、IDはaddCandidateForm、トリガーはsubmitですね。
querySelector('form')でもいいんですけど、今後フォームが2つ以上出てくるときとかもあるかもしれないので、フォームについてはIDタグをつけるようにしていきます。
名前、年齢のどちらかが空欄の場合はアラートが出るようにしておきました。
htmlのほうでもrequiredを付けておきましたが、念のため。
trim()もつけておきましたので、余計なスペースなどもなくなりました。
あとこれも念の為、nameとageに正しい値が代入されているか確認するためにconsole.log(name, age);も入れておきました。
次は取得した要素を配列に入れていきます。
配列を作成
普通の掲示板の場合は、書き込んだ内容を次々に足していくだけでしたのでappendChild()だけで済んだのですが、今回は投票数に応じて並べ方なども変えていく必要があります。
なので配列を作ります。
これで条件による並べ方などは制御することができます。
また、今回はadd.htmlから送信したデータを、vote.htmlという別のHTMLファイルで反映させることも必要になります。
しかし配列を作っただけだと、add.htmlから開くJavaScriptとvote.htmlから開くJavaScriptは別物ですので、配列は渡すことはできません。
じゃあ配列はどこかに保存して、どちらのHTMLファイルからもアクセスできるようにするしかありません。
「どこかってどこよ？」というと、「ブラウザ」です。
ブラウザに保存するところがあります。
ストレージの中にブラウザに割いている部分があるという理解でいいです。
localStorage
ここに保存できます。
しかしこのlocalStorage、なんと配列はそのままでは保存できません。
できるのは文字列のみ。
なら配列も文字列に置き換えるしかありません。
なのでやることは以下の通り。
配列を文字列に置き換えてlocalStorageに保存→必要なときにlocalStorageから取り出して文字列を配列に戻す。
めんどくせえ。
では配列を文字列にするのですが、この文字列はJSON形式です。
つまりJSONの書き方に従います。
JSONの形式についてはこちら。
html-css-javascript.hatenadiary.com
では配列を作ります。
const candidates=[];
（実際はここで書くのではなく、絶対に用意すべき箱ですのでイベントリスナーより前（一番上）に書きます。
物理的にも、まず箱を用意してから中身を作るのと同じです。）
次に配列の要素の一つを作ります。
要素はオブジェクトになりますので、以下のような感じになります。
const newCandidate = { name: name, age: age, vote: 0, };
ですね。
でもここでちょっと裏技というか省略できるところがあります。
キーと値が同じ場合、いちいち:で挟む必要がなく、その名前一つを書くだけで済みます。
name:name;
だったら
name
だけで済むことになります。
なので上の配列は
const newCandidate = { name, age, vote: 0, };
にすることができます。
voteについては初期値が０なので省略できません。
んでから配列にフォームから送られてきた要素を次々足していくことになりますので、ここは配列の最後に要素を足すpushをつかいます。
それから配列の中身を取得してから、HTMLの
- に要素を入れるために
createElementを使います。
listItemの中のtextにフォームで送信した内容を反映させて、これを配列の一番後ろに追加します。
この辺、詳しくは以前のブログに記載しているので、そちらをご覧ください。
candidates.push(newCandidate); const listItem = document.createElement('li'); listItem.textContent = `名前: ${newCandidate.name}, 年齢: ${newCandidate.age}, 投票数: ${newCandidate.vote}`; candidateList.appendChild(listItem);
ここまでをまとめます。
const candidates=[]; document.getElementById('addCandidateForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('candidateName').value.trim(); const age = document.getElementById('candidateAge').value.trim(); const candidateList = document.getElementById('candidateList'); if (!name || !age) { alert('input the name and age of candidates'); return; } console.log(name, age); const newCandidate = { name, age, vote: 0, }; candidates.push(newCandidate); const listItem = document.createElement('li'); listItem.textContent = `名前: ${newCandidate.name}, 年齢: ${newCandidate.age}, 投票数: ${newCandidate.vote}`; candidateList.appendChild(listItem); });
ここまでで配列とその中身を作りました。
ほとんど以前に作った「JavaScript 掲示板を作る③書き込みを反映させる」と同じ内容ではありますが。
次回からが重要で、今回つくった配列をローカルストレージに保存することで、別のHTMLファイルから読み込めるようにします。
