更改变量值 onclick

Question

I am new to JavaScript and I need some help. I am making a website in shades of orange, in the website i have two a buttons (a). and i have two divs that can be shown by clicking on the a button. i have three more divs colored in red, blue and orange, by clicking them the page change the background, the header, buttons and the divs to shades of blue, red or orange. when i click a button (a) his color turns to white. when i push the other button he turns white and the first turn orange (thats good). but if i turn the page in to shades of blue, click on the first button and then on the second one the first turns back to orange and not blue. how can i make it right?

i've tried make an if statement and a variable inside a function. when i make it blue in the function i've wrote var shades="blue" (and the same for red and orange). then in the a button function i've wrote color background to white and then turn the ather button to an if statement (if shades="blue" turn background to blue) and then another statement (if shades="red" turn background to red) and the same for orange. but it didn't work because the variable value changed only in the function and then stoped. how can i change variables value by clicking an a button?

Thank you.

exemple:

<header>
    <ul id="headerul">
        <li><a onclick="page1()" href="#" id="a" >page1</a></li>
        <li><a onclick="page2()" href="#" id="a1">page2</a></li>

        <div id="blue" onclick="colorB()"></div>
        <div id="red" onclick="colorR()"></div>
        <div id="orange" onclick="colorO()></div>
    </ul>
</header>

<script>
        function colorB(){
        document.getElementById('body').style.cssText =
        'background-color:a7a7ff;'
        document.getElementById('headerul').style.cssText =
        'background-color:7777ff;'
        document.getElementById('a').style.cssText =
        'background-color:#a7a7ff;'
        document.getElementById('a1').style.cssText =
        'background-color:#a7a7ff;'
        var body = 'blue'
    }
    function colorR(){
        document.getElementById('body').style.cssText =
        'background-color:ff5252;'
        document.getElementById('headerul').style.cssText =
        'background-color:ff2222;'
        document.getElementById('a').style.cssText =
        'background-color:#ff5252;'
        document.getElementById('a1').style.cssText =
        'background-color:#ff5252;'
        var body = 'red'
    }
    function colorO(){
        document.getElementById('body').style.cssText =
        'background-color:#ffc5a0;'
        document.getElementById('headerul').style.cssText =
        'background-color:#ff8027;'
        document.getElementById('a').style.cssText =
        'background-color:#ffc5a0;'
        document.getElementById('a1').style.cssText =
        'background-color:#ffc5a0;'
        var body = 'orange'
    }
    function page1(){
        document.getElementById('a1').style.cssText =
        'background-color:white;'
              if (body=="blue") {
              document.getElementById('a').style.cssText =
             'background-color:#a7a7ff;'
        };
              if (body=="orange") {
              document.getElementById('a').style.cssText =
              'background-color:#ffc5a0;'
        };
    }
    function page2(){
        document.getElementById('a').style.cssText =
        'background-color:white;'
              if (body=="blue") {
              document.getElementById('a1').style.cssText =
             'background-color:#a7a7ff;'
        };
              if (body=="orange") {
              document.getElementById('a1').style.cssText =
              'background-color:#ffc5a0;'
        };
    }
</script>

Answer 1

This is nearly impossible without seeing your code but at a guess this may help you in some way:

https://jsfiddle.net/1xv6qjpx/

I would add this as a comment but I don't yet have the ability to do so.