onclick点击事件

[泽泽泽泽特、]

前端菜鸟，写了代码bug不断，请求支援~~
在一个父div结构中放了两个子div结构，在两个子div中图片各自加入了一个onclick效果，但是点击第二个div层中的图片时，效果显示到了第一个子div图片上，请问什么问题？
代码附上：
<div id="div1" style="width:1000px;height:800px;background:url('../images/p2.bmp') no-repeat">



<div id="button1" class="box1" style="height:40px; width:60px; margin-right:745px; margin-top:234px; float:right">
<img id="picts" src="~/images/on.bmp" alt="">

<script>

function change_pic() {
var divDom = document.getElementById('box1')
var button = document.getElementById("button1");

var picts = document.getElementById("picts");

button.onclick = function () {
if (picts.getAttribute("src", 2) == "../images/on.bmp") {

picts.setAttribute("src", "../images/off.bmp");

} else {

picts.setAttribute("src", "../images/on.bmp");

};
}
}
change_pic();


</script>
</div>



<div id="button2" class="box2" style="height:40px; width:60px; margin-right:500px; margin-top:200px; float:right">
<img id="picts" src="~/images/on1.bmp" alt="">

<script>

function change_pic() {
var divDom = document.getElementById('box2')

var button = document.getElementById("button2");

var picts = document.getElementById("picts");

button.onclick = function () {
if (picts.getAttribute("src", 2) == "../images/on1.bmp") {

picts.setAttribute("src", "../images/off1.bmp");

} else {

picts.setAttribute("src", "../images/on1.bmp");

};
}
}
change_pic();

</script>
</div>



</div>

[天际的海浪]

img标签的id重名，用document.getElementById("picts")只能获取第一个。 两个change_pic函数重名，后面的会覆盖前面的。 另外，你两个函数一样。写一个就可以了，在调用时传递不同参数。

[洋洋技术笔记]

推荐使用this 完成这玩意 比如 <div onclick="run(this)"></div><div onclick="run(this)"></div>
js写法
function run(dom){
dom.innerHTML="";
}

[泽泽泽泽特、]

引用 2 楼 Rising-Sun 的回复：

解决啦，谢谢，顺便问题下这两个div浮动设置的为什么不能并排显示？

[泽泽泽泽特、]

引用 1 楼 天际的海浪 的回复：

解决啦，谢谢，顺便问题下这两个div浮动设置的为什么不能并排显示？

[_YkRonin]

这个就触及到冒泡了胸嘚

[泽泽泽泽特、]

解决了，谢谢啦

[天际的海浪]

引用 4 楼 泽泽泽泽特、 的回复:

引用 1 楼 天际的海浪 的回复：

解决啦，谢谢，顺便问题下这两个div浮动设置的为什么不能并排显示？

你 margin-right:745px; 设置太大了，一行排不下两个div

[泽泽泽泽特、]

引用 7 楼 天际的海浪 的回复：

引用 4 楼 泽泽泽泽特、 的回复:

[quote=引用 1 楼 天际的海浪 的回复：]

解决啦，谢谢，顺便问题下这两个div浮动设置的为什么不能并排显示？

你 margin-right:745px; 设置太大了，一行排不下两个div[/quote]好的 谢谢啦，现在改了代码，都解决了