Question

因此，我尝试使用HTML和JavaScript创建一个脚本，该脚本的交通信号灯会在按下按钮时发生变化。我已经整理了所有HTML，但if / else语句正在播放我。

以下是代码：

<!DOCTYPE html>
<html>
<body>

<table border="10px" style="background-color: #000000">
<tr>
<td width="30px" height="30px" style="background-color: #000000" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #ecec54" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #01db01" id="3"></td>
</tr>
</table>

<p id="temp">1234567890</p>

<button type="button" onclick=changeLights()>Change Lights</button>

</body>
<script>
var lightInfo = ["1","2","3"]

function changeLights() {
	var oneState = document.getElementById(lightInfo[0]).getAttribute("style")
	var twoState = document.getElementById(lightInfo[1]).getAttribute("style")
	var threeState = document.getElementById(lightInfo[2]).getAttribute("style")
	document.getElementById("temp").innerHTML = oneState
	if (oneState === "background-color: #000000") {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#f00000";
	} 
	else {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#000000";
	}
}
</script>
</html>

PS。这段话只是一个临时调试的事情。

所以我希望代码获得在if语句中使用的每个数据单元的十六进制颜色，这有助于将顶部光从黑色变为红色（因为我得到黑色的十六进制，即＃000000）。但是，当我尝试重复该过程时，红色数据单元格的颜色以其他格式（rgb（240,0,0））出现，这使得if语句失败并且代码中断。有没有办法确保颜色以十六进制格式给出？

Answer 1

因此，如果您想在JavaScript中获得hex值，则必须创建单独的函数like this。但是，解决问题的更简单方法是在if语句中为黑色指定hex和rgb。

<强> JS

if (oneState === "background-color: #000000" || oneState === "background-color: rgb(0, 0, 0);") {
  //Do stuff
}

＆＃13;

var lightInfo = ["1","2","3"]

function changeLights() {
	var oneState = document.getElementById(lightInfo[0]).getAttribute("style")
	var twoState = document.getElementById(lightInfo[1]).getAttribute("style")
	var threeState = document.getElementById(lightInfo[2]).getAttribute("style")
	document.getElementById("temp").innerHTML = oneState;
	if (oneState === "background-color: #000000" || oneState === "background-color: rgb(0, 0, 0);") {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#FF0000";
	} 
	else {
		document.getElementById(lightInfo[0]).style.backgroundColor = "#000000";
	}
}

＆＃13;

<table border="10px" style="background-color: #000000">
<tr>
<td width="30px" height="30px" style="background-color: #000000" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #ecec54" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" style="background-color: #01db01" id="3"></td>
</tr>
</table>

<p id="temp">1234567890</p>

<button type="button" onclick=changeLights()>Change Lights</button>

＆＃13;

Answer 2

我可能会在这里讨论主题，但为什么不用css类来做这个？

例如：拥有css：

Ext.define('MyTextField',{
    extend:'Ext.form.field.Text',
    xtype:'mytextfield',
    labelWidth:125,
    ...
});

并将您的html更新为：

.black {
  background-color: #000000;
}

.red {
  background-color: #ff0000;
}

.yellow {
   background-color: #ecec54;
}

.green {
    background-color: #01db01;
 }

并将您的javascript更新为：

<table border="10px" class="black">
<tr>
<td width="30px" height="30px" class="black" id="1"></td>
</tr>
<tr>
<td width="30px" height="30px" class="yellow" id="2"></td>
</tr>
<tr>
<td width="30px" height="30px" class="green" id="3"></td>

这可能是一种更好的方法，比如更强大的代码。

改变颜色定义 - 交通灯脚本

2 个答案: