次のスクリプトを使用して、ページのカラー テーマを設定しています。ユーザーがボタンをクリックすると、HTML にクラスが設定されます。ユーザーが別のボタンをクリックすると、代わりにそのクラス名が設定されます。これは問題なく動作します。
<script type="text/javascript">
if (localStorage.buttonColor) {
document.getElementsByTagName('html')[0].className = localStorage.buttonColor
}
function getButtonColor(buttonName) {
localStorage.buttonColor = buttonName;
document.getElementsByTagName('html')[0].className = buttonName
}
</script>
ボタンの色に localstorage 値がある場合は、クラスを設定します。ただし、ボタンを無効にするためにも必要です。localstorage の値に基づいてボタンを無効にするにはどうすればよいでしょうか?
また、ユーザーがボタンをクリックすると、そのボタンが無効になり、クラス「テーマ」を持つ他のすべてのボタンが有効になります。JavaScriptのみのソリューションを探しています。
HTMLは次のとおりです。
<form class="ng-pristine ng-valid">
<button class="theme" name="darkBlue" onclick="getButtonColor(this.name)">Blue</button>
<button class="theme" name="black" onclick="getButtonColor(this.name)">Black</button>
</form>
ここに 1 つの解決策がありますが、ボタンを選択しやすくするためにボタンにクラス名を付けることにしたので、これですべてではありません。また、これはローカル ストレージから取得する場合にのみ機能し、ユーザーがボタンをクリックした場合はボタンを無効にし、他のすべてを有効にする必要があります。
if (localStorage.buttonColor) {
document.getElementsByTagName('html')[0].className = localStorage.buttonColor
var buttons = document.body.getElementsByTagName('form')[0].getElementsByTagName('button')
for(var i =0; i < buttons.length; i++)
if(buttons[i].name == localStorage.buttonColor) button.disabled = true
}