Question

我希望在javascript中获得我的IF语句帮助。发生的事情是，单击按钮时不会改变颜色。

这就是我想要做的。单击下一个按钮时，将发生以下情况

如果灯光div的背景颜色为＃ff0000（红色），则应更改为#ffff00（琥珀色）

如果灯光div的背景颜色为＃ffff00（琥珀色），则应更改为＃00ff00（绿色）

如果灯光div的背景颜色为＃00ff00（绿色），则应更改为＃ff0000（红色）

HTML：

<div class="main">
    <h1>Traffic Light</h1>
    <div class="light">
    </div>
    </br>
    <button id="next" onClick="setBgColour" type="button">Next</button>     
</div>

的CSS：

.light 
{
    background-color: #ff0000;
    width: 100px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
}

javascipt的：

function setBgColour(){

    if(document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
    }

    else if (document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
    }

    else

    document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';

}

window.onload = function(){

    document.getElementById('next').addEventListener('click', setBgColour);

};

Answer 1

你可以简化这个：

var lightnumber = 0; // this variable saves the current state of the traffic light
var lights = [
    "#ff0000", "#ffff00", "#00ff00"
]; // this variable saves all possible lights.

setBgColour = function() {
    // at first we decide which colour shall be next, so we increase
    // the lightnumber by one, except, if we are already at green, then we start over at 0
    lightnumber = lightnumber == (lights.length - 1) ? 0 : lightnumber + 1;
    // and here we set the light according to our lightnumber variable
    document.getElementsByClassName("light")[0].style.backgroundColor = lights[lightnumber];
}

.light {
    background-color: #ff0000;
    width: 100px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
}

<h1>Traffic Light</h1>

<div class="light"></div>
</br>
<button id="next" onClick="setBgColour()" type="button">Next</button>
</div>

Answer 2

您的javascript代码应如下所示： -

var
  sString: string;
  bmWidth: TBitmap;
  iWidth: Integer;
begin
  sString := edtEdit.Text;
  bmWidth := TBitmap.Create;
  try
    bmWidth.Canvas.Font.Assign(lblLabel.Font);
    iWidth := bmWidth.Canvas.TextWidth(sString);
  finally
    bmWidth.Free;
  end;
end;

即。在内部，如果您需要使用function setBgColour() { if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ff0000') { document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00'; } else if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ffff00') { document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00'; } else { document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000'; } window.onload = function () { document.getElementById('next').addEventListener('click', setBgColour); }; }，而不是==，这是一个赋值运算符。

JavaScript if语句改变Div

2 个答案: