HTMLとJSだけで簡単な星評価フォームを作る（CSSなし）

この記事にアクセスしてくださった方々の心境はおそらくこうでしょう。

「星評価フォームをつくりたいけど、cssを書くのは嫌ダッ！！！」

CSS嫌いなエンジニアが多いと聞きますが、この記事ではその期待に応えるべく、CSSを使うことなく、簡単な星評価のフォームを実装していきます。

はじめに

説明の前に、以下に当てはまる人は、この記事はあまりおすすめしません。

• 小数点以下の評価を実装したい人（星が半分欠けているみたいなやつ）
• JSが嫌いで嫌いで仕方ない人

実装イメージはこんな感じです。

星を押すと、押した星以下すべての星に色がつきます。これだけ。

事前準備

ディレクトリ構成は以下とします。

ここで、押す前の星(star_off.png）と、押した後の星(star_on.png）のアイコン画像を/staticディレクトリに入れます。今回はこちらからお借りしましたアイコンを使用したいと思います。

実装

HTML

index.html

<form method="POST">
    <img src="static/star_off.png" id="1" class="star" width="30px" onclick="star(this)">
    <img src="static/star_off.png" id="2" class="star" width="30px" onclick="star(this)">
    <img src="static/star_off.png" id="3" class="star" width="30px" onclick="star(this)">
    <img src="static/star_off.png" id="4" class="star" width="30px" onclick="star(this)">
    <img src="static/star_off.png" id="5" class="star" width="30px" onclick="star(this)">

    <button type="submit" name="star-value">送信</button>
</form>
    
<script type="text/javascript" src="/static/main.js"></script>

見やすくするためDOCTYPEやらheadやらは省かせていただきます

JS

main.js

function star(e){
    const stars = document.getElementsByClassName("star");
    const submit = document.getElementsByName('star-value')[0];

    for(s of stars){
        if (parseInt(s.id)<=parseInt(e.id)){
            s.src = "static/star_on.png";
        }else if (parseInt(s.id)>parseInt(e.id)){
            s.src = "static/star_off.png";
        }
    }
    submit.value = e.id;
}

DOMを使って、すべての星の画像と送信ボタンのタグを指定します。
星がクリックされるとonClickイベントが発生し、すべての星をfor of回して選択した星のid以下のidをもつ星にstar_on.png、それ以外にはstar_off.pngを適用するという至極単純なやり方です。
選択した星と同じ数字を、送信ボタンのvalueに付与することで、POSTしたときに受け取ることができます。この送信ボタンを<input type="submit">にしないのは、submitのvalue属性はボタン内のテキストを指すため、ボタン内の文字が変わってしまうのを防ぐためです。
工夫次第でもっといいアプローチができそうですが、とりあえずこんなところです。