How to make my button change once clicked to carry out a different function?
Question
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!:)
4 answers
solution1
2 ACCPTED 2014-11-21 19:04:03
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>
solution2
0 2014-11-21 19:03:02
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>
solution3
0 2014-11-21 19:09:31
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";
}
}
solution4
0 2014-11-21 19:36:34
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;"...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.