I created a webpage with a color picker that changes the color of the action bar. However, the action bar color only changes once and I want it to change on all other pages as well. Below is the code I used:
<h4>Color Picker</h4>
<script>
function changeColor1(id1)
{
document.getElementById(id1).style.color = "#00BCD4"; // forecolor
document.getElementById(id1).style.backgroundColor = "#00BCD4"; // backcolor
}
function changeColor2(id2){
document.getElementById(id2).style.color = "#D32F2F"; // forecolor
document.getElementById(id2).style.backgroundColor = "#D32F2F"; // backcolor #009688
}
function changeColor3(id3){
document.getElementById(id3).style.color = "#FFAB00"; // forecolor
document.getElementById(id3).style.backgroundColor = "#FFAB00"; // backcolor
}
function changeColor4(id4){
document.getElementById(id4).style.color ="#4CAF50"; // forecolor
document.getElementById(id4).style.backgroundColor = "#4CAF50"; // backcolor
}
</script>
<a href="#" onclick="changeColor1('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-info"></button></a>
<a href="#" onclick="changeColor2('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-danger"></button></a>
<a href="#" onclick="changeColor3('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-warning"></button></a>
<a href="#" onclick="changeColor4('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-success"></button></a>
</div>
<a href="index.html"><h4> Logout</h4</a></p>
To enable dynamic color changing in all other pages when a color is clicked on the existing page, what steps should be taken?