CODEWITHSUNDEEP
javascripthtmlbuttoncolors
user3594463
user3594463

Reputation: 123

How to make my button change once clicked to carry out a different function?

At the moment I have two buttons, "Green" and "Red". Once "Green" is clicked the text in the div (red as default) goes green. And when the "Red" button is clicked the text goes red. These are two separately working buttons that carry out the function I want.

But I want there to be just one button. The Default button will be called "Green", once clicked it will change the font of the div to green and the button will change name to "Red". Once "Red" is clicked it will turn the font back to red and the button back to "Green".

How do I go about this using javascript? JQuery won't be much help to me as I am trying to master javascript at the moment.

Here is my current html with my two working buttons:

<!DOCTYPE html>
<html>


<head>

<link rel="stylesheet" type="text/css" href="clock3.css">

<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

<title> Clock Part III </title>

<script type="text/javascript">

window.onload = time;

function time () {

var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes(); 
var seconds = today.getSeconds();

if (hours < 10)
            hours = "0" + hours
if (minutes < 10)
            minutes = "0" + minutes
if (seconds < 10)
           seconds = "0" + seconds 

times = hours+':'+minutes+':'+seconds;
document.getElementById('timer').innerHTML = times;

setTimeout(time, 1000);

}

 var random = Math.floor(Math.random() * 2);




 </script>





</head>

<body>

<button type="button" id="green" onclick = 'document.getElementById("timer").style.color = ("#088A08");'>Green</button>
<button type="button" id="red" onclick = 'document.getElementById("timer").style.color =      ("#FF0000");'>Red</button>

<h1> Clock </h1>

<div id="timer"></div>

</body>


</html>

Thanks in advance!:)

Upvotes: 0

Views: 2562

Answers (4)

MrCleanX
MrCleanX

Reputation: 416

Create a toggle() function...

function toggle () {

    var color;

    if (document.getElementById('button').style.color == "green") {
        color = "red";
    } else {
        color = "green";
    }

    document.getElementById('button').style.color = color;
    document.getElementById("timer").style.color = color;
}

Set the button and timer default color with...

...style="color:green;"...

Upvotes: 0

Alexis Peters
Alexis Peters

Reputation: 1631

just set a flag like 

var isGreen = true;

and create a function

function colorControl (el){ 
  if(isGreen){
    document.getElementById("timer").style.color = ("#088A08");
    isGreen= false;
    el.innerHTML = "RED";
    return;
   }
  document.getElementById("timer").style.color = ("#FF0000");
  isGreen = true;

 el.innerHTML = "Green";
}

And your button like that:

<button type="button" id="green" onclick ="colorControl(this)">Green</button>

Upvotes: 2

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You can add the click event listener using JavaScript instead of HTML.

Within the listener, check the button's textContent property. With it, you can set the timer color and change the button's text:

var button  = document.getElementById('button');

button.addEventListener('click',function() {
  var timer = document.getElementById('timer');
  if(this.textContent === 'Red') {
    timer.style.color= '#ff0000';
    this.textContent= 'Green';
  }
  else {
    timer.style.color= '#088a08';    
    this.textContent= 'Red';
  }
});


function time () {
  var today = new Date();
  var hours = today.getHours();
  var minutes = today.getMinutes(); 
  var seconds = today.getSeconds();

  if (hours < 10) hours = "0" + hours
  if (minutes < 10) minutes = "0" + minutes
  if (seconds < 10) seconds = "0" + seconds 

  times = hours+':'+minutes+':'+seconds;
  document.getElementById('timer').innerHTML = times;
  setTimeout(time, 1000);
}

var button  = document.getElementById('button');

button.addEventListener('click',function() {
  var timer = document.getElementById('timer');
  if(this.textContent === 'Red') {
    timer.style.color= '#ff0000';
    this.textContent= 'Green';
  }
  else {
    timer.style.color= '#088a08';    
    this.textContent= 'Red';
  }
});

time();
#timer {
  color: red;
}
<div id="timer"></div>

<button id="button">Green</button>

Upvotes: 0

user4271796
user4271796

Reputation: 1

  
 Green 
            function changeColor(self)
            {
                if(self.innerHTML == "Green")
                {
                    document.getElementById("timer").style.color = "#088A08";
                    self.innerHTML = "Red";
                }
                else if(self.innerHTML == "Red")
                {
                    document.getElementById("timer").style.color = "#FF0000";
                    self.innerHTML = "Green";
                }
            }

Upvotes: 0

Related Questions