さて、今まで作ってきたのは管理者側のページでした。 候補者の名前や年齢、IDなんかも与えて登録するのは管理人がやることになります。 本当はそこもユーザーに任せてしまおうかと思ったりもしたのですが、二重で書き込んだり、「こういうのを書くのは禁止…

ついに三部作が６作目まで来てしまいました。 ４作目のときに謝ったので、もう謝罪はしません。 前回の記事はこちら。 html-css-javascript.hatenadiary.com HTMLから送られてくる数値は、すべて文字列に変換されてしまうのが問題だというところまででした。…

三部作も早いもので、もう５作目まできました（これ如何に）。 前回はイベント委譲についてやりました。 html-css-javascript.hatenadiary.com もうタイトルでは何をやってたのか全くわからなくなってしまいましたね。 これ、どっかでタグ付けでもしておきま…

嘘ついてすいませんでした 三部作と言っておきながら、三つ目の記事ではまだ問題があったのでヌケヌケと４つ目に入ります。 html-css-javascript.hatenadiary.com 前回でも言いましたが、コード的には特に問題はありませんでした。 コードはこんな感じです。…

html-css-javascript.hatenadiary.com 前回まででコードの書き方は全て終わりました。 問題点 さて、ここまでをまとめてみます。 let candidates = JSON.parse(localStorage.getItem("candidates")) || []; document .getElementById("addCandidateForm") .a…

「配列の整列」は３部作になっています。 前回のはこちら。 html-css-javascript.hatenadiary.com 前回作ったコードが以下のようになります。 forEachを回すためにnewCandidateを変数candidateに置き換えました。 candidates.forEach(candidate=>{ const lis…

※本来は配列の整列は１記事で書くつもりだったのですが、寄り道やなんやと余計なことばかり書いてるせいで最終的に１６０００文字を超える大長編になってしまいました。 なのでいくつかに分けて投稿します。 では本編。 前回は投票ボタンを作って、それを押…

前回はローカルストレージに配列を文字列に変換して保存し、保存した文字列をキーで指定してロードして配列に変換しました。 html-css-javascript.hatenadiary.com で、こんな感じになりました。 let candidates = JSON.parse(localStorage.getItem('candida…

前回は投票ページの候補者を追加するためのフォームを作りました。 次はフォームに名前と年齢を入力して追加ボタンを押すことで、投票ページの候補として追加されるようにします。 この辺についても以前に記事にしていますので、それを参照してさらっと終わ…

前回までで掲示板の骨子はできあがりました。 もくじの「バックエンドを使った掲示板」を見ていただければ、その変遷はわかっていただけると思います。 私もわからなくなるたび、これらの記事を見直すことになります。 で。 フロント側、サーバー側のコード…

掲示板のサーバーも（おそらく）今回で完成し、掲示板の骨子は完成します。 では、やっていきましょう。 バックエンド側のコード（Node.js) const express = require('express'); const cors = require('cors'); const app = express(); const PORT = 3000; …

前編はこちら。 この記事では前回の記事をよく出しますので、このリンク先はタブを消さないで適宜参照するとよいかと思います。 さて、前置きは置いといて、とっとと進めましょう。 まずフロントエンド側の全体のJavaScriptはこちら。 document.getElementBy…

さて、前回やっと掲示板が動くようにできました。 とは言ってもChatGPT先生が教えてくれたのをそのままコピペしただけですが。 そんなコピペしただけのコードを動かすのに必死になっていろいろ修正してたんだから死にたくなり笑えてきます。 さて、そんなCha…

さて、前回の最後で２つの問題が生じていました。 1.エンターキーで送信されないこと 2.送信したあとも文字が消えないこと このふたつの問題に対処していきたいと思います。 但し、エンターキーの問題の方について記述したことは完全に無駄足ですので、暇で…

JavaScriptの常識シリーズ④。 addEventListenerです。 「何かをしたときに何かを起こす」ということはわかると思います。 では document.querySelector("form").addEventListener("submit", e => { e.preventDefault(); }); というような場合。 addEventList…

掲示板の書き込みフォームができたので、次は書き込んだ内容を反映させるようにします。 普通はサーバーに書き込んだ内容を送って、返ってきたものを掲示板に反映させるのですが、まずはJavaScriptだけを使ってサーバーは通さず反映させるようにしていきます…