我正在尝试创建活动仓库布局。有3辆车，我已经用该车所在位置的颜色指定了它。当我输入时，该车的位置将是该位置的颜色。但是有3辆车，3种颜色。我创建了布局，我还确定了工具的颜色。但是，当我输入位置名称时，如果相同颜色的车辆位于不同的位置，我想隐藏旧车辆的颜色。 有没有人可以帮助我使用Javascript？
这是我的CSS代码：
<!DOCTYPE html>
<html>
<head>
<style>
.preview {
display: block;
float: left;
margin: 0px;
width: 10%;
background-color: #FFCC00;
}
.gamePreview, .gameName {
}
.gamePreview {
background-color: rgba(255, 255, 255, 0.8);;
float: left;
height: 40px;
margin-top: 0.0px;
width: 50%;
text-align: center;
}
.gamePreview2 {
background-color:rgba(255, 255, 255, 0.8);;
float: right;
height: 40px;
margin-top: 0.0px;
width: 60%;
text-align: center;
}
.gamePreview3 {
background-color: rgba(255, 255, 255, 0.8);;
float: left;
height: 30px;
margin-left: 10px;
width: 50%;
text-align: center;
}
</style>
</head>
这是我的html代码：
<body>
<form id="location_text" action="#" >
Location for A: <input type="text" id="location"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<form id="location2_text" action="#" >
Location for B <input type="text" id="location2"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<form id="location3_text" action="#" >
Location for C: <input type="text" id="location3"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
<p>Enter location name </p>
<div class="preview">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="MH.8.0" class="gamePreview3">MH.8.0</div>
<div id="MH.7.0" class="gamePreview3">MH.7.0</div>
<div id="MH.6.0" class="gamePreview3">MH.6.0</div>
<div id="MH.5.0" class="gamePreview3">MH.5.0</div>
<div id="MH.4.0" class="gamePreview3">MH.4.0</div>
<div id="MH.3.0" class="gamePreview3">MH.3.0</div>
<div id="MH.2.0" class="gamePreview3">MH.2.0</div>
<div id="MH.1.0" class="gamePreview3">MH.1.0</div>
<div id="MG.8.0"class="gamePreview3">MG.8.0</div>
<div id="MG.7.0"class="gamePreview3">MG.7.0</div>
<div id="MG.6.0"class="gamePreview3">MG.6.0</div>
<div id="MG.5.0"class="gamePreview3">MG.5.0</div>
<div id="MG.4.0"class="gamePreview3">MG.4.0</div>
<div id="MG.3.0"class="gamePreview3">MG.3.0</div>
<div id="MG.2.0"class="gamePreview3">MG.2.0</div>
<div id="MH.1.0"class="gamePreview3">MG.1.0</div>
<div id="MF.8.0"class="gamePreview3">MF.8.0</div>
<div id="MF.7.0"class="gamePreview3">MF.7.0</div>
<div id="MF.6.0"class="gamePreview3">MF.6.0</div>
<div id="MF.5.0"class="gamePreview3">MF.5.0</div>
<div id="MF.4.0"class="gamePreview3">MF.4.0</div>
<div id="MF.3.0"class="gamePreview3">MF.3.0</div>
<div id="MF.2.0"class="gamePreview3">MF.2.0</div>
<div id="MF.1.0"class="gamePreview3">MF.1.0</div>
<div id="ME.8.0"class="gamePreview3">ME.8.0</div>
<div id="ME.7.0"class="gamePreview3">ME.7.0</div>
<div id="ME.6.0" class="gamePreview3">ME.6.0</div>
<div id="ME.5.0" class="gamePreview3">ME.5.0</div>
<div id="ME.4.0" class="gamePreview3">ME.4.0</div>
<div id="ME.3.0" class="gamePreview3">ME.3.0</div>
<div id="ME.2.0" class="gamePreview3">ME.2.0</div>
<div id="ME.1.0" class="gamePreview3">ME.1.0</div>
<div id="MD.8.0" class="gamePreview3">MD.8.0</div>
<div id="MD.7.0" class="gamePreview3">MD.7.0</div>
<div id="MD.6.0" class="gamePreview3">MD.6.0</div>
<div id="MD.5.0" class="gamePreview3">MD.5.0</div>
<div id="MD.4.0" class="gamePreview3">MD.4.0</div>
<div id="MD.3.0" class="gamePreview3">MD.3.0</div>
<div id="MD.2.0" class="gamePreview3">MD.2.0</div>
<div id="MD.1.0" class="gamePreview3">MD.1.0</div>
<div id="MC.8.0" class="gamePreview3">MC.8.0</div>
<div id="MC.7.0" class="gamePreview3">MC.7.0</div>
<div id="MC.6.0" class="gamePreview3">MC.6.0</div>
<div id="MC.5.0" class="gamePreview3">MC.5.0</div>
<div id="MC.4.0" class="gamePreview3">MC.4.0</div>
<div id="MC.3.0" class="gamePreview3">MC.3.0</div>
<div id="MC.2.0" class="gamePreview3">MC.2.0</div>
<div id="MC.1.0" class="gamePreview3">MC.1.0</div>
<div id="MB.8.0" class="gamePreview3">MB.8.0</div>
<div id="MB.7.0" class="gamePreview3">MB.7.0</div>
<div id="MB.6.0" class="gamePreview3">MB.6.0</div>
<div id="MB.5.0" class="gamePreview3">MB.5.0</div>
<div id="MB.4.0" class="gamePreview3">MB.4.0</div>
<div id="MB.3.0" class="gamePreview3">MB.3.0</div>
<div id="ME.2.0" class="gamePreview3">MB.2.0</div>
<div id="ME.1.0" class="gamePreview3">MB.1.0</div>
<div id="MA.8.0" class="gamePreview3">MA.8.0</div>
<div id="MA.7.0" class="gamePreview3">MA.7.0</div>
<div id="MA.6.0" class="gamePreview3">MA.6.0</div>
<div id="MA.5.0" class="gamePreview3">MA.5.0</div>
<div id="MA.4.0" class="gamePreview3">MA.4.0</div>
<div id="MA.3.0" class="gamePreview3">MA.3.0</div>
<div id="MA.2.0" class="gamePreview3">MA.2.0</div>
<div id="MA.1.0" class="gamePreview3">MA.1.0</div>
<div class="gameName"></div>
</div>
<div class="preview">
<div id="A.99.0" class="gamePreview">A.99.0</div>
<div id="B.99.0" class="gamePreview">B.99.0</div>
<div id="A.98.0" class="gamePreview">A.98.0</div>
<div id="B.98.0" class="gamePreview">B.98.0</div>
<div id="A.97.0" class="gamePreview">A.97.0</div>
<div id="B.97.0" class="gamePreview">B.97.0</div>
<div id="A.96.0" class="gamePreview">A.96.0</div>
<div id="B.96.0" class="gamePreview">B.96.0</div>
<div id="A.95.0" class="gamePreview">A.95.0</div>
<div id="B.95.0" class="gamePreview">B.95.0</div>
<div id="A.94.0" class="gamePreview">A.94.0</div>
<div id="B.94.0" class="gamePreview">B.94.0</div>
<div id="A.93.0" class="gamePreview">A.93.0</div>
<div id="B.93.0" class="gamePreview">B.93.0</div>
<div id="A.92.0" class="gamePreview">A.92.0</div>
<div id="B.92.0" class="gamePreview">B.92.0</div>
<div id="A.91.0" class="gamePreview">A.91.0</div>
<div id="B.91.0" class="gamePreview">B.91.0</div>
<div id="A.90.0" class="gamePreview">A.90.0</div>
<div id="B.90.0" class="gamePreview">B.90.0</div>
<div id="A.89.0" class="gamePreview">A.89.0</div>
<div id="B.89.0" class="gamePreview">B.89.0</div>
<div id="A.88.0" class="gamePreview">A.88.0</div>
<div id="B.88.0" class="gamePreview">B.88.0</div>
<div id="A.87.0" class="gamePreview">A.87.0</div>
<div id="B.87.0" class="gamePreview">B.87.0</div>
<div id="A.86.0" class="gamePreview">A.86.0</div>
<div id="B.86.0" class="gamePreview">B.86.0</div>
<div id="A.85.0" class="gamePreview">A.85.0</div>
<div id="B.85.0" class="gamePreview">B.85.0</div>
<div id="A.84.0" class="gamePreview">A.84.0</div>
<div id="B.84.0" class="gamePreview">B.84.0</div>
<div id="A.83.0" class="gamePreview">A.83.0</div>
<div id="B.83.0" class="gamePreview">B.83.0</div>
<div id="A.82.0" class="gamePreview">A.82.0</div>
<div id="B.82.0" class="gamePreview">B.82.0</div>
<div id="A.81.0" class="gamePreview">A.81.0</div>
<div id="B.81.0" class="gamePreview">B.81.0</div>
<div id="A.80.0" class="gamePreview">A.80.0</div>
<div id="B.80.0" class="gamePreview">B.80.0</div>
<div id="A.79.0" class="gamePreview">A.79.0</div>
<div id="B.79.0" class="gamePreview">B.79.0</div>
<div id="A.78.0" class="gamePreview">A.78.0</div>
<div id="B.78.0" class="gamePreview">B.78.0</div>
<div id="A.77.0" class="gamePreview">A.77.0</div>
<div id="B.77.0" class="gamePreview">B.77.0</div>
<div id="A.76.0" class="gamePreview">A.76.0</div>
<div id="B.76.0" class="gamePreview">B.76.0</div>
<div id="A.75.0" class="gamePreview">A.75.0</div>
<div id="B.75.0" class="gamePreview">B.75.0</div>
<div id="A.74.0" class="gamePreview">A.74.0</div>
<div id="B.74.0" class="gamePreview">B.74.0</div>
<div id="A.73.0" class="gamePreview">A.73.0</div>
<div id="B.73.0" class="gamePreview">B.73.0</div>
<div id="A.72.0" class="gamePreview">A.72.0</div>
<div id="B.72.0" class="gamePreview">B.72.0</div>
<div id="A.71.0" class="gamePreview">A.71.0</div>
<div id="B.71.0" class="gamePreview">B.71.0</div>
<div id="A.70.0" class="gamePreview">A.70.0</div>
<div id="B.70.0" class="gamePreview">B.70.0</div>
<div id="A.69.0" class="gamePreview">A.69.0</div>
<div id="B.69.0" class="gamePreview">B.69.0</div>
<div id="A.68.0" class="gamePreview">A.68.0</div>
<div id="B.68.0" class="gamePreview">B.68.0</div>
<div id="A.67.0" class="gamePreview">A.67.0</div>
<div id="B.67.0" class="gamePreview">B.67.0</div>
<div id="A.66.0" class="gamePreview">A.66.0</div>
<div id="B.66.0" class="gamePreview">B.66.0</div>
<div id="A.65.0" class="gamePreview">A.65.0</div>
<div id="B.65.0" class="gamePreview">B.65.0</div>
<div id="A.64.0" class="gamePreview">A.64.0</div>
<div id="B.64.0" class="gamePreview">B.64.0</div>
<div id="A.63.0" class="gamePreview">A.63.0</div>
<div id="B.63.0" class="gamePreview">B.63.0</div>
<div id="A.62.0" class="gamePreview">A.62.0</div>
<div id="B.62.0" class="gamePreview">B.62.0</div>
<div id="A.61.0" class="gamePreview">A.61.0</div>
<div id="B.61.0" class="gamePreview">B.61.0</div>
<div id="A.60.0" class="gamePreview">A.60.0</div>
<div id="B.60.0" class="gamePreview">B.60.0</div>
<div id="A.59.0" class="gamePreview">A.59.0</div>
<div id="B.59.0" class="gamePreview">B.59.0</div>
<div id="A.58.0" class="gamePreview">A.58.0</div>
<div id="B.58.0" class="gamePreview">B.58.0</div>
<div id="B.57.0" class="gamePreview">B.57.0</div>
<div id="A.57.0" class="gamePreview">A.57.0</div>
<div id="B.56.0" class="gamePreview">B.56.0</div>
<div id="A.56.0" class="gamePreview">A.56.0</div>
<div id="B.55.0" class="gamePreview">B.55.0</div>
<div id="A.55.0" class="gamePreview">A.55.0</div>
<div id="B.54.0" class="gamePreview">B.54.0</div>
<div id="A.54.0" class="gamePreview">A.54.0</div>
<div id="B.53.0" class="gamePreview">B.53.0</div>
<div id="A.53.0" class="gamePreview">A.53.0</div>
<div id="B.52.0" class="gamePreview">B.52.0</div>
<div id="A.52.0" class="gamePreview">A.52.0</div>
<div id="B.51.0" class="gamePreview">B.51.0</div>
<div id="A.51.0" class="gamePreview">A.51.0</div>
<div id="B.50.0" class="gamePreview">B.50.0</div>
<div id="A.50.0" class="gamePreview">A.50.0</div>
<div id="B.49.0" class="gamePreview">B.49.0</div>
<div id="A.49.0" class="gamePreview">A.49.0</div>
<div id="B.48.0" class="gamePreview">B.48.0</div>
<div id="A.48.0" class="gamePreview">A.48.0</div>
<div id="B.47.0" class="gamePreview">B.47.0</div>
<div id="A.47.0" class="gamePreview">A.47.0</div>
<div id="B.46.0" class="gamePreview">B.46.0</div>
<div id="A.46.0" class="gamePreview">A.46.0</div>
<div id="B.45.0" class="gamePreview">B.45.0</div>
<div id="A.45.0" class="gamePreview">A.45.0</div>
<div id="B.44.0" class="gamePreview">B.44.0</div>
<div id="A.44.0" class="gamePreview">A.44.0</div>
<div id="B.43.0" class="gamePreview">B.43.0</div>
<div id="A.43.0" class="gamePreview">A.43.0</div>
<div class="gameName"></div>
</div>
<div class="preview">
<div id="C.99.0" class="gamePreview2">C.99.0</div><br><br>
<div id="C.98.0" class="gamePreview2">C.98.0</div><br><br>
<div id="C.97.0" class="gamePreview2">C.97.0</div>
<div id="C.96.0" class="gamePreview2">C.96.0</div>
<div id="C.95.0" class="gamePreview2">C.95.0</div>
<div id="C.94.0" class="gamePreview2">C.94.0</div>
<div id="C.93.0" class="gamePreview2">C.93.0</div>
<div id="C.92.0" class="gamePreview2">C.92.0</div>
<div id="C.91.0" class="gamePreview2">C.91.0</div>
<div id="C.90.0" class="gamePreview2">C.90.0</div>
<div id="C.89.0" class="gamePreview2">C.89.0</div>
<div id="C.88.0" class="gamePreview2">C.88.0</div>
<div id="C.87.0" class="gamePreview2">C.87.0</div>
<div id="C.86.0" class="gamePreview2">C.86.0</div>
<div id="C.85.0" class="gamePreview2">C.85.0</div>
<div id="C.84.0" class="gamePreview2">C.84.0</div>
<div id="C.83.0" class="gamePreview2">C.83.0</div>
<div id="C.82.0" class="gamePreview2">C.82.0</div>
<div id="C.81.0" class="gamePreview2">C.81.0</div>
<div id="C.80.0" class="gamePreview2">C.80.0</div>
<div id="C.79.0" class="gamePreview2">C.79.0</div>
<div id="C.78.0" class="gamePreview2">C.78.0</div>
<div id="C.77.0" class="gamePreview2">C.77.0</div>
<div id="C.76.0" class="gamePreview2">C.76.0</div>
<div id="C.75.0" class="gamePreview2">C.75.0</div>
<div id="C.74.0" class="gamePreview2">C.74.0</div>
<div id="C.73.0" class="gamePreview2">C.73.0</div>
<div id="C.72.0" class="gamePreview2">C.72.0</div>
<div id="C.71.0" class="gamePreview2">C.71.0</div>
<div id="C.70.0" class="gamePreview2">C.70.0</div>
<div id="C.69.0" class="gamePreview2">C.69.0</div>
<div id="C.68.0" class="gamePreview2">C.68.0</div>
<div id="C.67.0" class="gamePreview2">C.67.0</div>
<div id="C.66.0" class="gamePreview2">C.66.0</div>
<div id="C.65.0" class="gamePreview2">C.65.0</div>
<div id="C.64.0" class="gamePreview2">C.64.0</div>
<div id="C.63.0" class="gamePreview2">C.63.0</div>
<div id="C.62.0" class="gamePreview2">C.62.0</div>
<div id="C.61.0" class="gamePreview2">C.61.0</div>
<div id="C.60.0" class="gamePreview2">C.60.0</div>
<div id="C.59.0" class="gamePreview2">C.59.0</div>
<div id="C.58.0" class="gamePreview2">C.58.0</div>
<div id="C.57.0" class="gamePreview2">C.57.0</div>
<div id="C.56.0" class="gamePreview2">C.56.0</div>
<div id="C.55.0" class="gamePreview2">C.55.0</div>
<div id="C.54.0" class="gamePreview2">C.54.0</div>
<div id="C.53.0" class="gamePreview2">C.53.0</div>
<div id="C.52.0" class="gamePreview2">C.52.0</div>
<div id="C.51.0" class="gamePreview2">C.51.0</div>
<div id="C.50.0" class="gamePreview2">C.50.0</div>
<div id="C.49.0" class="gamePreview2">C.49.0</div>
<div id="C.48.0" class="gamePreview2">C.48.0</div>
<div id="C.47.0" class="gamePreview2">C.47.0</div>
<div id="C.46.0" class="gamePreview2">C.46.0</div>
<div id="C.45.0" class="gamePreview2">C.45.0</div>
<div id="C.44.0" class="gamePreview2">C.44.0</div>
<div id="C.43.0" class="gamePreview2">C.43.0</div>
<div class="gameName"></div>
</div>
</div>
<script src="js.js"></script>
<script src="js2.js"></script>
<script src="js3.js"></script>
</body>
</html>
和Javascript代码：
document.getElementById("location_text").addEventListener("submit", changeColor, false);
function changeColor() {
var location = document.getElementById("location").value;
document.getElementById(location).style.backgroundColor = "#D40511";
}
Click to see my output and understand what i mean
谢谢:)
