(JavaScript)URLのパラメーターに合わせてボタンの色を変更したい

Question

###実現したいこと
アイコンをクリックするとURLにパラメーターが渡される仕組みになっています。
例）「全て」をクリック押すとURLにall、「ストーリー」をクリックURLにstoryが渡される

これを活かして、逆にURLからJavaScriptでパラメーターを取得し、どのアイコンをクリックしたかが視覚的にわかるように対応するアイコンの色を変更したいと考えております。

###考えていること・問題点
URLからのパラメーター取得方法はURLSearchParams(window.location.href)でできると認識。
また、アイコンの色変更はifとbgColorで変更可能と認識。

上記2つの機能を合わせ、サンプルコードのようにしましたが、何も変化がありません。
そもそもURLSearchParams(window.location.href)の直下にconsole.log("適当な文字列")を置き、
検証画面で動きを確認しましたが、上記"適当な文字列"が表示されないことから、URLのパラメーターの取得がそもそも動いてないのではと考えますが、結論に至らない状態です。

上記考え方に問題があるのか？それともコードに過不足があるのか、お手数ですがご教示いただけますと幸いです。

###サンプルコード
必要と思われるコードのみを表示しております。
不足等ありましたらご教示いただけますと幸いです。

<div class="picmenu">
    <ul id="table-ul">
        <li onmouseover="mouseOn1();" onmouseout="mouseOff1();">
　　　　　　　<!--Djangoを使用。下記コードにてURLにindex/all/allパラメーターを追加-->
            <a href="{% url 'index' 'all' 'all' %}">
                <img src="{% static 'img/star.png' %}" class="icon-category" id="star" />
                <p>全て</p>
            </a>
        </li>
        <li onmouseover="mouseOn2();" onmouseout="mouseOff2();">
　　　　　　　<!--Djangoを使用。下記コードにてURLにindex/all/storyパラメーターを追加-->
            <a href="{% url 'index' 'all' 'story' %}">        
                <img src="{% static 'img/memo.png' %}" class="icon-category" id="memo" />
                <p>ストーリー</p>
            </a>
        </li>
    </ul>
</div>

    function color1(){
        var url = new URLSearchParams(window.location.href);
        var params = url.searchParams;
        if (params.has("all")){
            documents.baColor = "#0595a7"
        } else if (params.has("story")){
            documents.bgColor = "#0595a7"
        }
    }

    function mouseOn1(){
        var obj = document.getElementById("star");
        obj.src = "{% static 'img/star_white.png' %}";
        // console.log("mouseOn1")
    }

    function mouseOn2(){
        var obj = document.getElementById("memo");
        obj.src = "{% static 'img/memo_white.png' %}";
    }

###環境
HTML5
Bootstrap 4.7.0
Python 3.6.3
Django 2.2.16

Answer 1

おはようございます。

問題文読ませていただきました。

以下の手順にて対応するとうまくいきそうです。

1. jsファイルを作成する。
2. ロードしたタイミングで発火するjsを作成する。(参考 : https://techacademy.jp/magazine/15558)
3. var path = location.pathname;の末端(all or story)を取得する。(参考 : https://lab.syncer.jp/Web/JavaScript/Snippet/20/, 参考 : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split)
4. 変更したいHTML要素を指定してcssを変更する。(参考 : https://techacademy.jp/magazine/31008)

ご確認のほど、よろしくお願いいたします。????‍♂️

Comments

[minari766]

各種参考URLも添付いただき有り難うございます！
やはりonloadとURL読み込みを組み合わせるんですね。
記事読み込んでもう一度挑戦してみます！

Answer 2

color1の呼び出しが見当たらないですが？
あとbaColorはbgColorですねきっと。

Comments

[minari766]

ご回答有り難うございます。
おっしゃる通りcolor1の呼び出しのイベントハンドラが抜けておりました。
また、baColorはタイプミスです。失礼いたしました。

<a href="{% url 'index' 'all' 'all' %}">にとりあえずonclickを置いてみたところ、JavaScriptが動いたのですが、同時にページ更新も行われるため、一瞬で元に戻ってしまいます。
onloadがページ更新時に使えそうと考えたのですが、今度はJavaScriptが動く形跡が見られなくなってしまいました。
ページ更新がトリガーとなるその他のイベントハンドラをご存知ないでしょうか。

Answer 3

画像を見る限り、URLのパラメータという用語の意味を誤解されているように感じます。
パラメータと呼ばれるのは、"http://example.com/search?foo=1&bar=2"というURLがあったとして、{foo: 1}（キーがfoo、値が1）・{bar: 2}（キーがbar、値が2）というようなデータです。
画像にあるようなURLにはパラメータが含まれていないため、当然取得できていないのだと考えます。

今回で言うと、URLを"127.0.0.1:8000/area/all?all=true"とすれば「全て」のアイコンの色が変わり、"127.0.0.1:8000/area/all?story=true"のようにすれば、「ストーリー」の色が変わるのではないでしょうか？
提示いただいたソースコードだけだとこちらで動作確認ができないため、一旦試していただけますか？

（※今回は、質問者様の書かれたコードをそのまま利用するため、all、storyという2種類のパラメータを使用するようにしましたが、"?clicked=all"または"?clicked=story"のようなパラメータにして、clickedというパラメータの値（今回でいうall、story）で分岐する方がよいような気は致します。）

（追記）改めて見てみると、Javascriptの5行目に誤字らしい部分があったり（documents.baColor = "#0595a7"とありますがbgColorの間違いでは？）、color1関数の呼び出しが見当たらなかったりするので、別の原因も複合している可能性はありそうです。

Comments

[minari766]

ご回答有り難うございます。
bgColorのスペルミスを修正し、color1の呼び出しのイベントハンドラを追加してみました。（試しにonclick、onloadを使用）

ご指摘の通り、パラメーターへの理解ができておりませんでした。詳細ご教示いただき誠に有り難うございます。
現状の"127.0.0.1:8000/area/all/all"という並びについてですが、その他の機能にこのURL形式を利用しているため、できれば今の形式を維持したいと考えております・・・。
URLSearchParams以外でURLの文字列を取得する方法をご存知であればご教示いただけないでしょうか。
お手数となりすみません。

[hallen0225]

URLの形式を維持されたいのであれば、（他の方もコメントされていましたが）URLの末尾の部分、具体的に言うと、最後のスラッシュの次の文字から最後の文字までの部分を取得できれば良いのだと思います。
"127.0.0.1:8000/area/all/all"でしたら"all"、"127.0.0.1:8000/area/all/story"でしたら"story"の部分ですね。

ここを取得する方法としてはこのようになるかと思います。（str変数に"all"または"story"が入ります）
let url = window.location.href
let indexOfLastSlash = url.lastIndexOf('/');
let str = url.substring(indexOfLastSlash + 1)