javascript 函数未在HTMLButtonElement.onclick中定义

yvt65v4c 于 5个月前发布在 Java

关注(0)|答案(2)|浏览(57)

我试图使一些控制框移动到左，右，上，下.但当我在脚本标签中的所有功能，它得到一个错误（在所有四个onclick按钮）：
函数未在HTMLButtonElement.onclick中定义
在我制作按钮标签的行中。

<html>
<button onclick = "leftmove()" id = "b1"> Left </button>
<button onclick = "rightmove()" id = "b2"> Right </button>
<button onclick = "upmove()" id = "b3"> Up </button>
<button onclick = "downmove()" id = "b4"> Down </button>
<h1 id = "box"></h1>
<style type = "text/css">
#box {
    width: 50px;
    height: 50px;
    background-color: black;
}

<script>
var box = document.getElementById("box");
function leftmove() {
    margin += 2;
    box.style.marginLeft = margin + "px";
}
var box = document.getElementById("box");
function rightmove() {
    margin -= 2;
    box.style.marginLeft = margin + "px";
}
var box = document.getElementById("box");
function upmove() {
    margin += 2;
    box.style.marginTop = margin + "px";
}
var box = document.getElementById("box");
function downmove() {
    margin -= 2;
    box.style.marginLeft = margin + "px";
}
</script>
</html>

字符串

JavaScript

来源：https://stackoverflow.com/questions/64186340/function-not-defined-at-htmlbuttonelement-onclick

2条答案

按热度按时间

bwntbbo31#

当使用<script>标签时，函数和目标标签必须在使用前定义。为了让你的例子工作，你必须分割你的脚本标签，首先定义你的函数，然后在你定义了相应的标签后设置box变量。同样，margin变量也不见了，我添加了零，但这可能不是你想要的。工作示例：

<html>
<body>
  <script>
    var margin = 0;

    function leftmove() {
      margin += 2;
      box.style.marginLeft = margin + "px";
    }

    function rightmove() {
      margin -= 2;
      box.style.marginLeft = margin + "px";
    }

    function upmove() {
      margin += 2;
      box.style.marginTop = margin + "px";
    }
    var box = document.getElementById("box");

    function downmove() {
      margin -= 2;
      box.style.marginLeft = margin + "px";
    }
  </script>

  <button onclick="leftmove()" id="b1"> Left </button>
  <button onclick="rightmove()" id="b2"> Right </button>
  <button onclick="upmove()" id="b3"> Up </button>
  <button onclick="downmove()" id="b4"> Down </button>
  <h1 id="box"></h1>
  <style type="text/css">
    #box {
      width: 50px;
      height: 50px;
      background-color: black;
    }
  </style>
  <script>
    var box = document.getElementById("box");
  </script>
</body>
</html>

字符串
关于这个问题，有几点要注意的：

<div>可能比<h1>更适合于此框
对于渲染性能，您最好使用transform(x, y)而不是margin来移动框

赞(0）回复(0）举报 5个月前

dy1byipe2#

我们创建了一些JavaScript变量来间接操作CSS，还实现了其他元素来更好地理解这些动作。

<html>
<style type = "text/css">
#box {
    margin: 100px;
    width: 50px;
    height: 50px;
    background-color: black;
}
</style>

<button onclick = "start()" id = "b0"> Start </button>
<button onclick = "leftmove()" id = "b1"> Left </button>
<button onclick = "rightmove()" id = "b2"> Right </button>
<button onclick = "upmove()" id = "b3"> Up </button>
<button onclick = "downmove()" id = "b4"> Down </button>
<div id="box"></div>

<script type="text/javascript">

var box = document.getElementById("box");
var margin = 10;
var marginX = 100;
var marginY = 100;

function start(){
    box.style.margin = "100px";
    marginX = 100;
    marginY = 100;
}

function leftmove() {
    marginX -= margin;
    box.style.marginLeft = marginX + "px";
}

function rightmove() {
    marginX += margin;
    box.style.marginLeft = marginX + "px";
}

function upmove() {
    marginY -= margin;
    box.style.marginTop = marginY + "px";
}

function downmove() {
    marginY += margin;
    box.style.marginTop = marginY + "px";
}

</script>
</html>

字符串

赞(0）回复(0）举报 5个月前

我来回答

javascript 函数未在HTMLButtonElement.onclick中定义

2条答案

相关问题

热门标签

最新问答