Geek Answers Handbook

Changing the color of something with a java script button

I want to change the color of my watch to red and blue using the red and blue buttons, but for some reason it does not work. If someone can take a look at my code and give me a hand, that would be great. I searched for the einser on YouTube and Google and came to the conclusion that no.

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;
}
+4
source share
3 answers

Change these methods in this way

If you want to change the background color, use this

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

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

If you want the text color chagne to use this

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

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

, , #clockdisplay, , , .bluetext .redtext. color: #0FF; .

:

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

: http://jsfiddle.net/j2r8ksa2/

+3

I did this the other day, but to change the color of the text. here is my function

function changeTextColor(){

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

}

and html:

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

ps script is best to go for HTML so that the first page is displayed first

0
source

More articles:


All Articles