题目:制作一个电影院选定座位的页面。可以单击选择座位,再次单击可退选该座位,选定的座位在右侧列表中显示出来)。
怎样才能再次单击座位按钮时,取消所有的效果(颜色消失,选定的座位号也消失啊)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{display:inline-block;float:left;}
#div_3{margin-left:50px;}
#div_2{color:red;text-align:center;font-size:20px;}
input{border-radius:5px;}
</style>
</head>
<body>
<div id="div_l">
<h2>电影院选座界面</h2>
<script>
for(var j=1;j<9;j++)
{
for(var i=1;i<9;i++)
{
document.write("<input id='items' type='button' onclick='click_1()' value="+j+'-'+i+">"+ " ");
}
document.write("<br><br>");
}
function click_1()
{
event.srcElement.style.backgroundColor="pink";
var div = document.getElementById("div_2");
var str="第"+event.srcElement.value.charAt(0)+"排的第"+event.srcElement.value.charAt(2)+"号座位"+"<br>";
div.innerHTML+=str;
}
</script>
</div>
<div id="div_3">
<h2>已经被选定的座位</h2>
<p id="div_2"></p>
</div>
</body>
</html>