Question

目前我有两个按钮，一个将文本更改为红色（默认），另一个按下时将其更改为绿色。当文本显示为红色时，我需要一个按钮来说绿色，所以当你点击绿色按钮时，它会将颜色变为绿色，然后同一个按钮显示为红色，当点击它时，它会将文本更改为红色

这是我的脚本：

function change1() { 
 txt = document.getElementById("txt");
 txt.style.color = 'green';
}

    function change2() { 
    txt = document.getElementById("txt");
    txt.style.color = 'red';
}

这些是我的按钮

<input type="button" value="Green" onclick="change1()" id="btn">

<input type="button" value="Red" onclick="change2()" id="btn">

Answer 1

使用if语句要求style.color属性

，您可以轻松完成

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

将 JavaScript 附加到HTML元素中不是一个好的做法，而是可以按代码检索按钮，然后使用addEventListener方法附加change功能click事件，请查看此codepen以查看其工作原理。

Answer 2

脚本调整

最简单的方法是使用按钮的当前值来确定要采取的操作：

function colorChange(button1) {
    var txt = document.getElementById("txt");

    if (button1.value == "Green") {
        txt.style.color = 'green';
        button1.value == "Red";
    } else {
        txt.style.color = 'red';
        button1.value == "Green";
    }
}

替代

您可以改为使用全局变量来跟踪按钮的状态，但这是一个不太理想的解决方案：

var txt;
var colorButtonIsGreen = true;

function colorChange() {
    if(!txt) txt = document.getElementById("txt");

    if (colorButtonIsGreen) {
        txt.style.color = 'green';
        button1.value == "Red";
    } else {
        txt.style.color = 'red';
        button1.value == "Green";
    }

    colorButtonIsGreen != colorButtonIsGreen;
}

HTML：

略微调整原始HTML：

<input type="button" value="Green" onclick="colorChange(this);" id="btn">

如何让一个按钮做两个功能

2 个答案:

脚本调整

替代

HTML：