Want to share background colors within the site using JavaScript and LocalStorege

Creating a web application.It hasn't been long since I started from zero, so I would appreciate it if you could kindly tell me.(I'd like to ask for a hint at least.)

We created a program that dynamically changed classes in JavaScript and changed the background color when we pressed the button created in HTML.
I would like to be able to save the background color even if I move it to another HTML created in the local file.I'm thinking of using LocalStorege as my current method.

Here's the code.

const backcols=[
  '#bcolorblue',
  '#bcolorred',
  '#bcolorlightblue',
  '#bcolorbrown',
  '#bcolorwhite',
  '#bcolorblack'
];

const backclass = [
  'bbl',
  'bre',
  'bli',
  'bbr',
  'bwh',
  'bbla'
]

const colors = [
  '#colorblue',
  '#colorred',
  '#colorlightblue',
  '#colorbrown',
  '#colorwhite',
  '#colorblack'
]

const colorclass=[
  'clbl',
  'clre',
  'cli',
  'clbr',
  'clwh',
  'clbla'
]

const coltabs=[
  'blue',
  'red',
  'lightblue',
  'brown',
  'white',
  'black'
]

/* Background color*/

var coltab="black";
var bcoltab="white";

$(backcols[0]).click(function(){
  if(coltab==coltabs[0]){
    alert('It will be the same color as the character color.')
  } else{
  document.getElementById("new1").className=backclass[0];
  bcoltab=coltabs[0];
  }
});

$(backcols[1]).click(function(){
  if(coltab==coltabs[1]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[1];
  bcoltab=coltabs[1];
  }
});

$(backcols[2]).click(function(){
  if(coltab==coltabs[2]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[2];
  bcoltab=coltabs[2];
   }
});

$(backcols[3]).click(function(){
  if(coltab==coltabs[3]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[3];
  bcoltab=coltabs[3];
   }
});

$(backcols[4]).click(function(){
  if(coltab==coltabs[4]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[4];
  bcoltab=coltabs[4];
   }
});

$(backcols[5]).click(function(){
  if(coltab==coltabs[5]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[5];
  bcoltab=coltabs[5];
   }
});

/* Character color: */

$(colors[0]).click(function(){
  if(bcoltab==coltabs[0]){
    alert('The color will be the same as the background color.')
   } else{
  document.getElementById("colorid").className=colorclass[0];
  coltab=coltabs[0];
   }
});

$(colors[1]).click(function(){
  if(bcoltab==coltabs[1]){
    alert('The color will be the same as the background color.')
   } else{
  document.getElementById("colorid").className=colorclass[1];
  coltab=coltabs[1];
   }
});

$(colors[2]).click(function(){
  if(bcoltab==coltabs[2]){
    alert('The color will be the same as the background color.')
   } else{
  document.getElementById("colorid").className=colorclass[2];
  coltab=coltabs[2];
   }
});

$(colors[3]).click(function(){
  if(bcoltab==coltabs[3]){
    alert('The color will be the same as the background color.')
   } else{
  document.getElementById("colorid").className=colorclass[3];
  coltab=coltabs[3];
   }
});

$(colors[4]).click(function(){
  if(bcoltab==coltabs[4]){
    alert('The color will be the same as the background color.')
   } else{
  document.getElementById("colorid").className=colorclass[4];
  coltab=coltabs[4];
   }
});

$(colors[5]).click(function(){
  if(bcoltab==coltabs[5]){
    alert('The color will be the same as the background color.')
   } else{
  document.getElementById("colorid").className=colorclass[5];
  coltab=coltabs[5];
   }
});

/*Change background color*/

.bbl{
  background-color:blue;
}

.bre{
  background-color:red;
}

.bli{
  background-color:lightblue;
}

.bbr{
  background-color:brown;
}

.bwh{
  background-color:white;
}

.bbla{
  background-color:black;
}

.clbl{
  color:blue;
  text-align:center;
}

/* CHANGE CHARACTER COLOR*/

.clre{
  color:red;
  text-align:center;
}

.cli{
  color:lightblue;
  text-align:center;
}

.clbr{
  color:brown;
  text-align:center;
}

.clwh{
  color:white;
  text-align:center;
}

.clbla{
  color:black;
  text-align:center;
}

<body id="new1">
  <divid="colorid" class="page">
    <divid="sizeid" class="size">

    <h1>Change Color</h1>
  
  <p>background color</p>br>

  <input id="bcolorblue" type="button" value="blue">
  <input id="bcolorred" type="button" value="red">
  <input id="bcolorlightblue" type="button" value="light blue">
  <input id="bcolorbrown" type="button" value="brown">
  <input id="bcolorwhite" type="button" value="white">
  <input id="bcolorblack" type="button" value="black">

  <p>character color</p>br>
        
  <input id="colorblue" type="button" value="blue">
  <input id="colorred" type="button" value="red">
  <input id="colorlightblue" type="button" value="light blue">
  <input id="colorbrown" type="button" value="brown">
  <input id="colorwhite" type="button" value="white">
  <input id="colorblack" type="button" value="black">

  <a href="setting.html">Back </a>
  
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="script.js"></script>

    </div>
  </div>
</body>

javascript html css

2022-09-29 21:31

1 Answers

I managed to do it after trial and error.Thank you for your advice.
It may not be pretty, but it's finished, so I hope I can get it done now.

Thank you.

const backcols=[
  '#bcolorblue',
  '#bcolorred',
  '#bcolorlightblue',
  '#bcolorbrown',
  '#bcolorwhite',
  '#bcolorblack'
];

const backclass = [
  'bbl',
  'bre',
  'bli',
  'bbr',
  'bwh',
  'bbla'
]
const coltabs=[
  'blue',
  'red',
  'lightblue',
  'brown',
  'white',
  'black'
]

/* Background color*/

var coltab="black";
var bcoltab="white";

$(backcols[0]).click(function(){
  if(coltab==coltabs[0]){
    alert('It will be the same color as the character color.')
  } else{
  document.getElementById("new1").className=backclass[0];
  bcoltab=coltabs[0];
  }
});

$(backcols[1]).click(function(){
  if(coltab==coltabs[1]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[1];
  bcoltab=coltabs[1];
  }
});

$(backcols[2]).click(function(){
  if(coltab==coltabs[2]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[2];
  bcoltab=coltabs[2];
   }
});

$(backcols[3]).click(function(){
  if(coltab==coltabs[3]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[3];
  bcoltab=coltabs[3];
   }
});

$(backcols[4]).click(function(){
  if(coltab==coltabs[4]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[4];
  bcoltab=coltabs[4];
   }
});

$(backcols[5]).click(function(){
  if(coltab==coltabs[5]){
    alert('It will be the same color as the character color.')
   } else{
  document.getElementById("new1").className=backclass[5];
  bcoltab=coltabs[5];
   }
});

window.onload=function(){
  varbkies=localStorage.getItem('colkye');

  if(bkyes==coltabs[0]){
document.getElementById("new1").className=backclass[0];
  } else if(bkyes==coltabs[1]){
document.getElementById("new1").className=backclass[1];
  } else if(bkyes==coltabs[2]){
document.getElementById("new1").className=backclass[2];
  } else if(bkyes==coltabs[3]){
document.getElementById("new1").className=backclass[3];
  } else if(bkyes==coltabs[4]){
document.getElementById("new1").className=backclass[4];
  } else if(bkyes==coltabs[5]){
document.getElementById("new1").className=backclass[5];
  }

/*Change background color*/

.bbl{
  background-color:blue;
}

.bre{
  background-color:red;
}

.bli{
  background-color:lightblue;
}

.bbr{
  background-color:brown;
}

.bwh{
  background-color:white;
}

.bbla{
  background-color:black;
}

.clbl{
  color:blue;
  text-align:center;
}

<body id="new1">
  <divid="colorid" class="page">
    <divid="sizeid" class="size">
      <divid="boldid" class="bold">

    <h1>Change Color</h1>
  
  <p>background color</p>br>

  <input id="bcolorblue" type="button" value="blue">
  <input id="bcolorred" type="button" value="red">
  <input id="bcolorlightblue" type="button" value="light blue">
  <input id="bcolorbrown" type="button" value="brown">
  <input id="bcolorwhite" type="button" value="white">
  <input id="bcolorblack" type="button" value="black">

  <a href="setting.html">Back </a>
  
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="script.js"></script>
      </div>
    </div>
  </div>
</body>

2022-09-29 21:31

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656