clickでボタンの背景色を変化させた後、ページを移ると元に戻っている

前提・実現したいこと

JavaScriptを用いて、ボタンをクリックすると色が白からオレンジに変化する実装をしました。

しかし、ページを離れると、また元の白色に戻ってしまいます。クリックしたボタンをオレンジのまま留めたい場合、どのような実装で可能になりますか？？

（色々と検索ワードを変えて検索してみたのですが、この問題の解決法についてのページは見当たらなかったように見えます...）

（イメージ画像）

発生している問題・エラーメッセージ

該当のソースコード

JavaScript
1window.addEventListener("load", function(){ 
2    const goodAnswerButton = document.getElementsByClassName('good-answer')
3    for (let i = 0; i < goodAnswerButton.length; ++i) { 
4        goodAnswerButton[i].addEventListener("click", function(){
5            if (goodAnswerButton[i].getAttribute("style") == "background-color:rgba(255, 115, 0, 0.432);") {
6                goodAnswerButton[i].removeAttribute("style", "background-color:rgba(255, 115, 0, 0.432);")
7            } else {
8                goodAnswerButton[i].setAttribute("style", "background-color:rgba(255, 115, 0, 0.432);")
9            }
10        })
11    }
12})

Rails
1【解決ボタンのコード】
2
3<div class="good-answer" id="text-button"><p id="text">解決</p></div>

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

回答2件

恐らく質問掲示板のようなものを作成していて
投稿者が解決した場合解決ボタンを押すと色が変わるという仕掛けで大丈夫でしょうか。

であれば解決済の場合のクラスを決めて
CSSでそのクラスに色を与えるというのが定番かと思われます
dbから質問を取り出して配置する際に解決済みだった場合そのクラスも追加するという処理ですね
その際ボタンクリックで色を変えるのではなく、
ボタンクリックでdbにその投稿を解決済みにするという処理にすると良いかなと思われます

ボタンクリックで直接色を変化させるのは自分にしか影響がなく、質問の通り戻ると色が元に戻り、他の人がアクセスした際も色は元の状態なのでdbを使うのが方法かと思います

投稿2020/11/07 11:01