CODEWITHSUNDEEP
javascripthtmlcsscolorsclock
MysteryX
MysteryX

Reputation: 105

Changing the colour of something using button java script

I want to change the colour of my clock to red and blue using the red and blue buttons but it isn't working for some reason. If anyone can take a look at my code and give me a hand it would be great.I have looked up the awnser on youtube and google and come to no avail.

HTML:

<html>
    <head>
        <title>    Clock II & III   </title>
        <link rel="stylesheet" type="text/css" href="clock.css">
        <script type = "text/javascript">
            var x = 0;

            function renderTime() {
                var currentTime = new Date();
                var diem = "AM"
                var h = currentTime.getHours();
                var m = currentTime.getMinutes();
                var s = currentTime.getSeconds();

                if (h == 0) {
                    h = 12
                } else if (h > 12) {
                    h = h - 12;
                    diem = "PM";
                }

                if (h < 10) {
                    h = "0" + h;
                }

                if (m < 10) {
                    m = "0" + m;
                }

                if (s < 10) {
                    s = "0" + s;
                }


                var myClock = document.getElementById('clockdisplay')
                myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;
            }


            window.onload = function() {
                renderTime();
                setInterval(renderTime, 1000);
            };

            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function() {
                    document.getElementById("Content").style.backgroundColor = getComputedStyle(this).backgroundColor;
                }
            }

            function reveal() {
                document.getElementById('clockdisplay').className = 'bluetext';
            }

            function hide() {
                document.getElementById('clockdisplay').className = 'redtext';
            }
        </script>
    </head>
    <body>
        <div id = "clockdisplay" class = "clockStyle">      
            22:23PM
        </div>
        <button class = "Btnred" onclick = "reveal()"> Red </button>
        <button class = "Btnblue" onclick = "hide()"> Blue </button>
    <body>
</html>

CSS:

#clockdisplay {
    background-color:#000;
    border:#999 2px inset;
    padding:6px;
    color:#0FF;
    font-family:"Ariel Black", Gadget, sans-serif;
    font-size:16px;
    font-weight:bold;
    letter-spacing:2px;
    display:inline;
}

.bluetext {
    color:blue;
}

.redtext {
    color:red;
}

Upvotes: 4

Views: 1250

Answers (3)

Taimour
Taimour

Reputation: 459

Change these methods in this way

If you want change background color use this

  function reveal() {
            document.getElementById('clockdisplay').style.backgroundColor = "red";
        }

        function hide(){
            document.getElementById('clockdisplay').style.backgroundColor = "blue";
        }

If you want to chagne text color use this

 function reveal() {
        document.getElementById('clockdisplay').style.color = "red";
    }

    function hide(){
        document.getElementById('clockdisplay').style.color = "blue";
    }

Upvotes: 0

dfsq
dfsq

Reputation: 193271

The problem is that styles defined for #clockdisplay have higher precedence then the ones set for .bluetext and .redtext classes. so the color color: #0FF; is always is applied even when you add classes.

You can fix it like this:

#clockdisplay.bluetext {
    color: blue;
}
#clockdisplay.redtext {
    color: red;
}

Demo: http://jsfiddle.net/j2r8ksa2/

Upvotes: 3

BlueShark
BlueShark

Reputation: 148

I did this the other day but for changing text colour. here is my function

function changeTextColor(){

    document.getElementById("textColour").style.color = "#F00";

}

and the html:

<button type="button" onclick="changeTextColor()">Will do as says</button> <br>
<p id="textColour">This text will change color</p>
</form>

p.s. script best to go after HTML to let the whole page render first

Upvotes: 0

Related Questions