Question

目前我有两个按钮，“绿色”和“红色”。单击“绿色”后，div中的文本（默认为红色）变为绿色。当单击“红色”按钮时，文本变为红色。这是两个单独工作的按钮，它们执行我想要的功能。

但我希望只有一个按钮。默认按钮将被称为“绿色”，一旦单击它将div的字体更改为绿色，按钮将名称更改为“红色”。单击“红色”后，它将字体恢复为红色，按钮返回“绿色”。

如何使用javascript进行此操作？ JQuery对我的帮助不大，因为我现在正在尝试掌握javascript。

这是我当前的html，带有两个工作按钮：

<!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>

提前致谢！）

Answer 1

只需设置一个标志，如

var isGreen = true;

并创建一个函数

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";
}

你的按钮就是这样：

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

Answer 2

您可以使用JavaScript而不是HTML添加click事件侦听器。

在监听器中，检查按钮的textContent属性。有了它，您可以设置timer颜色并更改按钮的文本：

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>

Answer 3

  
 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";
                }
            }

Answer 4

创建一个toggle（）函数......

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;
}

使用...

设置按钮和计时器默认颜色

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

点击后如何更改按钮以执行不同的功能？

4 个答案: