Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation How do you make a button do multiple tasks?

    I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Is this what you mean?

    Code:
    <span id = "mytext">Some text in here</span><br><br>
    <input type = "button" value= "Change Text Color" onclick = "changeIt()">
    
    <script type = "text/javascript">
    
    var colnumber =  0;
    var colors = ["red", "blue","green","yellow"];
    
    function changeIt() {
    var s = document.getElementById("mytext");
    s.style.color = colors[colnumber];
    colnumber ++;
    if (colnumber > (colors.length-1)) {colnumber = 0}
    }
    
    </script>

    "When large numbers of men are unable to find work, unemployment results." - Calvin Coolidge
    Last edited by Philip M; 04-01-2012 at 08:54 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by robe01 View Post
    It would be helpful if someone could show me how to do it please.
    (I am assuming you are teaching yourself javascript and so this is not assesable homework since pm has provided an option)

    What you are trying to do lends itself very nicely to using a ternary. If you haven't seen ternaries before, this easy tutorial shows what they are and how they work.

    And this is how a ternary could be used for your task.

    Code:
            
            <p id="par1">The cow jumped over the moon</p>
            <div>
                <button onclick="changeTextColor('par1')">Change text color</button>
            </div>
    
            <script type="text/javascript">
                var colours = ['black','red','green'];
                var curColor = 0;   
                
                function changeTextColor(elemID){
                    curColor = (++curColor == colours.length)? 0 : curColor; //this is the ternary that toggles the current color
                    document.getElementById(elemID).style.color = colours[curColor];
                }
            </script>
    or if you don't want to use a ternary you could just have
    Code:
                function changeTextColor(elemID){
                    if(++curColor == colours.length) {curColor = 0;}
                    document.getElementById(elemID).style.color = colours[curColor];
                }
    Last edited by Mishu; 04-02-2012 at 01:57 AM.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by robe01 View Post
    I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour.
    In case you need to do it in multiple places (and it's not a homework question).
    Code:
    <!DOCTYPE html>
    <html>
    <head>
         <title>Colour Cycler</title>
    </head>
    <body style='background-color:#ccc'>
    <p id='p1'><b>Cycle Colours</b> <input type='button' id='b1' value='->'>
    <p id='p2'><b>Cycle Colours</b> <input type='button' id='b2' value='->'>
    
    <script type='text/javascript'>
    
    function cycleColour( btnId, elemId, table )
    {
      var control = document.getElementById( btnId ),
          elem = document.getElementById( elemId );   
        
      control.onclick = function()
      {
        table.push( table.shift() );  
        elem.style.color = table[ 0 ];
      }    
      
      elem.style.color = table[ 0 ];   
    }
    
    cycleColour( 'b1', 'p1', [ 'red', 'lightgreen', 'black', 'blue' ] );
    
    cycleColour( 'b2', 'p2', [ '#f84', '#d0d', '#ff0', '#0ee', '#fff' ] );
    
    </script>
    
    </body>
    </html>


  •  

    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
    •