onclick点击事件

Question

前端菜鸟，写了代码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>

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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