隐藏不正常

时间:2015-02-10 00:21:23

标签: javascript html getelementbyid getelementsbyclassname

我有4个点。全部点击后,我希望隐藏的线条变得可见。当我点击一个点时,线条出现,我也无法显示所有4条线。如果有任何其他错误,我会非常感谢批评。先感谢您。

<doctype html>
<html>
<head>
<title>game01</title>
<style>
body {
background-color: #00FFFF;
}
line {
stroke: blue;
visibility: hidden;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<!-- <g transform="rotate(90 480 480)">-->
<circle id="circle0" cx="10" cy="10" r="5" onclick="dotClick(0);"></circle>
<circle id="circle1" cx="10" cy="40" r="5" onclick="dotClick(1);"></circle>

<line id="line1" x1="10" y1="10" x2="10" y2="40"></line><!--left line-->

<circle id="circle3" cx="30" cy="10" r="5" onclick="dotClick(2);"></circle>
<circle id="circle4" cx="30" cy="40" r="5" onclick="dotClick(3);"></circle>

<line id="line2" x1="30" y1="10" x2="30" y2="40"></line><!--right line-->

<line id="line3" x1="10" y1="10" x2="30" y2="10"></line><!--top line-->

<line id="line4" x1="10" y1="40" x2="30" y2="40"></line><!--bottom line-->



<!--</g>-->
</svg>
</body>

<script>



function dotClick(id) {
if (id > 0) {
document.getElementById("line" + id).style.visibility = "visible";
}

}

</script>
</html>

0 个答案:

没有答案