www.webdeveloper.com
Results 1 to 4 of 4

Thread: changing p text with buttons (Noob question)

  1. #1
    Join Date
    Nov 2013
    Posts
    2

    changing p text with buttons (Noob question)

    I'm trying to have a button change the text within a P tag. Doing this once is fine:

    Code:
    <script>
    function lights()
    {
    document.getElementById("lights").innerHTML="Lights on";
    }
    </script>
    BUT, what I'd like to do is have it toggle between two pieces of text each time the button is clicked. For example, the button should change the text to "lights on" or lights off".

    Thanks in advance for your help and apologies for asking such a basic question, but we've all got to start somewhere

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Red face

    Consider this ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
     #switchDisplay { width:100px; border:3px solid black; padding:10px 10px; text-align:center; }
    </style>
    
    </head>
    <body>
    
    <button onclick="lightSwitch(this)" value="off">Light</button>
    <p id="switchDisplay">Light is OFF</p>
    
    <script type="text/javascript">
    function lightSwitch(info) {
      if (info.value == "off") { 
        document.getElementById('switchDisplay').innerHTML = 'Light is ON'; 
        document.getElementById('switchDisplay').style.backgroundColor = '#ffff00'; 
        info.value = 'on';
      } else {
        document.getElementById('switchDisplay').innerHTML = 'Light is OFF'; 
        document.getElementById('switchDisplay').style.backgroundColor = '#ffffff'; 
        info.value = 'off';
      }
    }
    </script>
    
    </body>
    </html>
    Or, alternatively ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Light Switch </title>
    <style type="text/css">
     #switchDisplay { width:100px; background-color:#aaaaaa; 
        border:3px solid black; padding:10px 10px; text-align:center; }
    </style>
    
    </head>
    <body>
    
    <p id="switchDisplay">Light is OFF</p>
    <button onclick="lightSwitch(this)" value="OFF"> Light Switch </button>
    
    <script type="text/javascript">
    function lightSwitch(info) {
      var msg = 'Light is ';
      var colour;
      if (info.value == "OFF") { info.value = 'ON';  colour = '#ffff00'; }
                          else { info.value = 'OFF'; colour = '#aaaaaa'; }
      document.getElementById('switchDisplay').innerHTML = msg+info.value; 
      document.getElementById('switchDisplay').style.backgroundColor = colour; 
    }
    </script>
    
    </body>
    </html>
    Last edited by JMRKER; 11-21-2013 at 09:54 PM.

  3. #3
    Join Date
    Nov 2013
    Posts
    2
    Perfect! Thanks, that makes sense

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    You're most welcome.
    Happy to help.
    Good luck!

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