www.webdeveloper.com
Results 1 to 7 of 7

Thread: background-color of a button

  1. #1
    Join Date
    Feb 2014
    Posts
    16

    background-color of a button

    I have two buttons in my code.
    When I click on "button1" I want the background-color of the button to be yellow, and when I click on "button2" I want the background-color to be blue.
    This is what I tried….

    Code:
    HTML Code:
    <head>
    <meta charset="utf-8">
    <style>
    .color1{
    background-color:yellow;
    }
    
    .color2{
    background-color:blue;
    }
    </style>
    <title></title>
    <script>
    function changColor(el,col){
    if(el.value=="button1"){
    col.calssName="color1";
    }else{
    col.calssName='color2";
    }
    </script>
    </head>
    <body>
    <button value="button1" onclick="changColor(this,col)">button number 1</button>
    <button value="button2" onclick="changColor(this,col)">button number 2</button>
    </body>
    Is someone can help please ?

    Thanks

  2. #2
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    Code:
      
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    .color1{
    background-color:yellow;
    }
    
    .color2{
    background-color:blue;
    }
    </style>
    
    <script type="text/javascript">
    
    function changColor(el){
    
    if(el.value =='button1'){
    el.className='color1';
    
    }else{
    el.className='color2';
    }
    
    }
    </script>
    </head>
    <body>
    <button value="button1" onclick="changColor(this)">button number 1</button>
    <button value="button2" onclick="changColor(this)">button number 2</button>
    </body>
    </html>
    This code is working in Firefox 4.0b9
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,684
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <meta charset="utf-8">
    <style>
    .color1{
    background-color:yellow;
    }
    
    .color2{
    background-color:blue;
    }
    </style>
    <title></title>
    <script>
    function changColor(el){
     if(el.value=="button1"){
      el.className="color1";
     }
     else{
      el.className='color2';
     }
    }
    
    function changColor2(el){
     el.className=el.value=="button1"?"color1":'color2';
    }
    
    function changClass(el,col){
     el.className=col;
    }
    </script>
    </head>
    <body>
    <input type="button" value="button1" onclick="changColor(this)" />
    <input type="button" value="button2" onclick="changColor(this)" />
    <br />
    <input type="button" value="button1" onclick="changColor2(this)" />
    <input type="button" value="button2" onclick="changColor2(this)" />
    <br />
    <input type="button" value="button1" onclick="changClass(this,'color1')" />
    <input type="button" value="button2" onclick="changClass(this,'color2')" />
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,469
    Hi there bennykedmi,

    try iy like this...
    Code:
    
    <!doctype html>
    <html>
    <head>
    
    <meta charset="utf-8">
    
    <title>buttons</title>
    
    <style>
    .color1{
        background-color:yellow;
     }
    .color2{
        background-color:blue;
     }
    </style>
    
    <script>
    function changColor(el) {
    if(el.value=="button1") {
       el.className="color1";
     }
    else {
       el.className="color2";
      }
     }
    </script>
    </head>
    
    <body>
    
    <button value="button1" onclick="changColor(this)">button number 1</button>
    <button value="button2" onclick="changColor(this)">button number 2</button>
    
    </body>
    </html>
    or maybe this, if your want to remove javascript from the mark-up...
    Code:
    
    <!doctype html>
    <html>
    <head>
    
    <meta charset="utf-8">
    
    <title>buttons</title>
    
    <style>
    .color1{
        background-color:yellow;
     }
    .color2{
        background-color:blue;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){ 
       var el=document.getElementsByTagName('button');
    for(var c=0;c<el.length;c++) {
       el[c].addEventListener('click',makeClickHandler(c));
     }
    
    function makeClickHandler(c) {
       el[c].onclick=function() {
       changColor(this)
       };
      }
     }
    
    function changColor(el) {
    if(el.value==='button1') {
       el.className='color1';
     }
    else {
       el.className='color2';
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    })();
    </script>
    
    </head>
    
    <body>
    
    <button value="button1">button number 1</button>
    <button value="button2">button number 2</button>
    
    </body>
    </html>

    coothead

  5. #5
    Join Date
    Jun 2014
    Posts
    8
    Hi, could you be precise? Do you want the buttons to stay permanently yellow and blue (Use coothead's response, or just when you click them ( use this)?

    If you want the colors to stay there, you need JS, which is complex, but if you want them to be there only while you are clicking, you need the CSS button1:active or button2:active property.
    Hope I helped.

  6. #6
    Join Date
    Jun 2014
    Posts
    8

    Question

    Hi, could you be precise? Do you want the buttons to stay permanently yellow and blue (Use coothead's response, or just when you click them ( use this)?

    If you want the colors to stay there, you need JS, which is complex, but if you want them to be there only while you are clicking, you need the CSS button1:active or button2:active property.
    Hope I helped.

  7. #7
    Join Date
    Apr 2014
    Location
    Burnley uk
    Posts
    70
    Replace values with classes and it will work for sure

Thread Information

Users Browsing this Thread

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

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