random color changing using javascript

Question

<!DOCTYPE html>
<html>
    <head>
        <title>Button Homework</title>
        
        <script>
        
            function first()    {
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "100px";
                document.getElementById('type1').style.top= "200px";
                var red = Math.floor(Math.random() * 256);
                var green = Math.floor(Math.random() * 256);
                var blue = Math.floor(Math.random() * 256);

                var newColor = "rgb("+ red + "," + green + "," + blue +")";
            }
            
            function second()   {
                document.getElementById('type1').style.position = 'absolute';
                document.getElementById('type1').style.left= "0px";
                document.getElementById('type1').style.top= "80px";
            }
        </script>
    </head>
    <body>
        <h1>Special Button</h1>
        
        <input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
                            onmouseover= 'first()' onmouseout= 'second()';' />
    </body>
</html>

I'm trying to get the button to change to random colors every time you hover over it but I can't seem to get it to work, If anybody knows how, please help me out. Thanks!

Hi Kevin, do you mean to be moving the position of the button on mouse over? — Aron
– Aron, Commented May 29, 2021 at 22:17
No, but for the button to change to random colors every time you hover over it. example: starts off as white but once you hover over it, it changes to black and so on. — Kevin L
– Kevin L, Commented May 29, 2021 at 22:22
Aron's answer is accurate, you never assign the color to the element. But keep in mind that querying the DOM incurs a cost so when possible store references to the elements you need to manipulate and try to batch the changes to avoid repeated repaints. — pilchard
– pilchard, Commented May 29, 2021 at 22:25

Aron · Accepted Answer · 2021-05-29 22:21:08Z

1

All you need to do is assign the color to a style property. In this case the background color of the button.

function first() {
  var red = Math.floor(Math.random() * 256);
  var green = Math.floor(Math.random() * 256);
  var blue = Math.floor(Math.random() * 256);

  var newColor = "rgb(" + red + "," + green + "," + blue + ")";
  document.getElementById("type1").style.backgroundColor = newColor;
}

answered May 29, 2021 at 22:21

Aron

15013 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aron Over a year ago

Your welcome :) If it solved your problem please can you mark it as the answer?

poorly-written-code · Accepted Answer · 2021-05-30 01:57:35Z

If you want your homework to look like you copied it from the internet:

<!DOCTYPE html>
  <head>
    <title>Button Homework</title>
    <style>
      #type1{
        position: absolute;}

      #type1.mouseover{
        left: 100px;
        top: 200px;}

      #type1:not(.mouseover){
        left: 0px;
        top: 80px;}
    </style>
  </head>
  <body>
    <h1>Special Button</h1>
    <input id="type1" onclick="Output()" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" type="button" value="click">
    <script>
      function MouseOver(button) {
         button.classList.add('mouseover');
         //set backgroundColor to random hex string
         button.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
       }

       function MouseOut(button) {
         button.classList.remove('mouseover');
       }

       function Output() {
         //whatever this does
       }
    </script>
  </body>
</html>

Note that moving the buttons location triggers a mouseout event, so it gets pretty crazy. <style> doesn't seem to apply when you put it inline in the snippet.

Collectives™ on Stack Overflow

random color changing using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related