www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Change color of javascript button

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    resolved [RESOLVED] Change color of javascript button

    Hi,

    Beginner with javascript, and I'm trying to change the color of a button from the default gray to #A70000 with inline styles. Have the following code, but it only changes the background color after it's clicked; tried inserting the style before the onclick and that didn't work.

    Code:
    <input id="Fiction" value="Fiction" onclick="location.href='/entertainment/booktester/fiction';style.background='#A70000'" style="width: 75px; height: 32px" type="button" />
    Any pointers on where I'm going wrong would be much appreciated.

    Blair

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Try...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     #Fiction { 
       background-Color: #ff0000;
       width: 75px; height: 32px;
    }
    
    </style>
    
    <title> Untitled </title>
    
    </head>
    <body>
    <input id="Fiction" value="Fiction" onclick="location.href='/entertainment/booktester/fiction'" type="button" />
    </body>
    </html>
    Note that your href= value is not the current directory, but starts at the root.
    Don't know if that is a mistake or not since I'm just copying your post.

  3. #3
    Join Date
    Sep 2013
    Posts
    2
    That's just what I was trying to do! Many thanks for your help - didn't realise CSS could be put in a block like that outside a stylesheet. So much to learn...

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Thumbs up

    You are most welcome.
    Happy to help.

    Note: If you have multiple buttons, you could create a class instead of using the ID.

    Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles