求助,运行后只有“down”按钮起作用?

来源:-

慕函数1257581

2020-04-01 15:25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position Elements</title>
    <style>

        #txy{position: absolute;
 border: 2px solid black;
 width: 200px;
 height: 200px;
 margin-left: 100px;
 margin-top: 20px;
 background-color: rgb(224,224,224);}
    #btt{}
    </style>
    <script>
 window.onload=function trn1() {
            var left = document.getElementById("left");
 var txy = document.getElementById("txy");
 left.onclick = function () {
                txy.style.left = (txy.offsetLeft - 10) + "px"

 }
        };
 window.onload=function trn5() {
            var right = document.getElementById("right");
 var txy = document.getElementById("txy");
 right.onclick = function () {
                txy.style.left = (txy.offsetLeft+10) + "px"

 }
        };
 window.onload=function trn4() {
            var show = document.getElementById("show");
 var txy = document.getElementById("txy");
 show.onmouseover = function () {
                txy.style.display = "none"
 };
 show.onmouseout = function () {
                txy.style.display = "block"

 };
 };
 window.onload=function trn3() {
                var up = document.getElementById("up");
 var txy = document.getElementById("txy");
 up.onclick = function () {
                    txy.style.top = (txy.offsetTop - 10) + "px"
 };
 };
 window.onload=function trn2() {
            var down = document.getElementById("down");
 var txy = document.getElementById("txy");
 down.onclick = function () {
                txy.style.top = (txy.offsetTop+10) + "px"

 }
        }

    </script>
</head>
<body>
<div id="txy">This square is an absolutely positioned layer that you can move using the buttons above.</div>
        <div ID="btt">
        <button id="left"><-Left</button> <button id="right">right->  </button> <button id="up">Up</button> <button id="down">Down</button> <button id="show">Show</button>  <button id="move">Move</button>
        </div>









</body>
</html>


写回答 关注

1回答

  • 奋斗的渣渣
    2020-04-09 20:12:24
    已采纳

    一个页面有多个window.onload 会有冲突,后面的会覆盖前面的,建议你只写一个window.onload,

    function trn1 到trn5 都写进一个window.onload里面


JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468195 学习 · 21891 问题

查看课程

相似问题