如何在JavaScript中为按钮注册事件？

Question

我正在为一个javascript文件制作一个HTML文档。 我想使用一个显示绘制矩形的按钮，但我仍然不完全知道如何编码它。 这就是我的代码在HTML文档中的样子。 此外，当我在FireFox中打开html文档时，它不显示标题旁边的任何内容：

<!DOCTYPE html>
<!--Create a document that displays a drawn rectangle -->

<html lang = "en">

<head>
    <title> myRectangle.html </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript" src = "myRects.js"
    </script>
</head>

<body>

<h3>Drawing Rectangle</h3>



<form id ="myCanvas" action = "">

<p>

<button> type ="button">Draw Me</button>

</p>

</form>


</body>

</html>

这就是JavaScript文件的样子：

// myRects.js
// This script shows the use of the rectangle methods of the canvas
// element to draw two rectanges

function draw() {
    var dom = document.getElementById("myCanvas");
    if (dom.getContext) {
         var context = dom.getContext('2d');

     // Draw the outer filled rectangle
        context.fillRect(100, 100, 200, 200);

    // Clear a rectangle inside the first rectangle
        context.clearRect(150, 150, 100, 100);

    //Draw a stroke rectange
        context.strokeRect(180, 180, 40, 40);

    //Draw a small filled rectangle
        context.fillRect(195, 195, 10, 10);
    }
}

Answer 1

仅显示标题的原因是因为您在头部中的脚本的开始标记之后缺少>：它应该是这样的：

<script type = "text/javascript" src = "myRects.js">
</script>

单击按钮时运行draw（），执行以下操作：

<button id="click-to-draw"> Draw me </button>

在脚本中（您需要将脚本标记的位置移动到按钮下方）

document.getElementById("click-to-draw").addEventListener("click", function() {
draw();
});

更新：我刚刚意识到你可以将它简化为document.getElementById("click-to-draw").addEventListener("click", draw);

Answer 2

给你的按钮一个id：

<button type="button" id="draw-rectangle">Draw Me</button>

将以下代码添加到JavaScript文件的末尾，以将click事件挂钩到draw（）函数：

document.getElementById("draw-rectangle").onclick = draw;

并在文档的头部修复脚本标记：

<script type="text/javascript" src="myRects.js"></script>

Answer 3

如果你愿意，也可以使用onclick属性。

<button onclick='draw();'>Draw Me</button>

如何在JavaScript中为按钮注册事件？

问题描述

3 个解决方案

解决方案1
0 已采纳 2015-03-07 00:17:49

解决方案2
0 2015-03-07 00:19:18

解决方案3
0 2015-03-07 00:21:39

如何在JavaScript中为按钮注册事件？

问题描述

3 个解决方案

解决方案1 0 已采纳 2015-03-07 00:17:49

解决方案2 0 2015-03-07 00:19:18

解决方案3 0 2015-03-07 00:21:39

解决方案1
0 已采纳 2015-03-07 00:17:49

解决方案2
0 2015-03-07 00:19:18

解决方案3
0 2015-03-07 00:21:39