Question

我无可救药地失去了这个。

HTML：

<p onclick="on(&quot;test&quot;, testSwitch)" id="test" style="background:red;">TEST THIS STUFF OUT</p>

JS：

var testSwitch = 0;
function on(element, machineSwitch){
    if (machineSwitch==0){
        document.getElementById(element).style.display="green";
        document.getElementById(element).innerHTML="STATUS:ON";
        machineSwitch=1;
    }
    else if(machineSwitch==1){
    document.getElementById(element).style.display="red";
    document.getElementById(element).innerHTML="STATUS: OFF";
    machineSwitch=0;
    }
}

我正在努力使背景在点击时变为绿色，然后再次点击时变为红色。背景应循环通过这些。我还需要一个变量来控制它，因为我用它来控制循环是否发生在其他地方。

Answer 1

使用element.style.background更改BG颜色。

HTML

<p onclick="on(this)" id="test" style="background:red;">TEST THIS STUFF OUT</p>

JS

var testSwitch = 0;
var machineSwitch = 0;
function on(element){
    if (machineSwitch==0){
        element.style.background="green";
        element.innerHTML="STATUS:ON";
        machineSwitch=1;
    } else if(machineSwitch==1){
        element.style.background="red";
        element.innerHTML="STATUS: OFF";
        machineSwitch=0;
    }
}

使用data-属性更方便，如果要为其添加更多颜色，请使用case switch以获得更大的灵活性。

JS

function on(element){
    switch (element.getAttribute('data-machineSwitch')) {
        case '0':
            element.style.background="green";
            element.innerHTML="STATUS:ON";
            element.setAttribute('data-machineSwitch', '1');
            break;
        case '1':
            element.style.background="red";
            element.innerHTML="STATUS:OFF";
            element.setAttribute('data-machineSwitch', '0');
            break;
    }
}

Answer 2

<p onclick="on('test', testSwitch)" id="test" style="background:red;">TEST THIS STUFF OUT</p>
<script>

var testSwitch = 0;
function on(element, machineSwitch){
    if (machineSwitch==0){
        document.getElementById(element).style.backgroundColor ="green";
        document.getElementById(element).innerHTML="STATUS:ON";
        testSwitch=1;
    }
    else if(machineSwitch==1){
     document.getElementById(element).style.backgroundColor="red";
     document.getElementById(element).innerHTML="STATUS: OFF";
     testSwitch=0;
    }
}

 </script>

在点击它时使背景像单选按钮在关闭状态之间切换

2 个答案: