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

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

<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 个答案: